리액트 리렌더링 최적화 방법 조사

React 리렌더링 최적화 방법을 조사하게 된 계기

React 화면 업데이트 과정

1단계: 트리거

1. 처음 컴포넌트를 렌더해야 할 때 (초기 렌더링)

2. 컴포넌트 또는 부모 컴포넌트의 상태가 업데이트될 때 (리렌더링)

컴포넌트 리렌더링 트리거 조건 4가지

1. 상태(state)가 업데이트된 경우
React는 컴포넌트의 상태(state)가 업데이트되면 컴포넌트를 리렌더링합니다. (🌐 공식 문서 참고) 단, setState를 호출하여도 이전 상태와 값이 차이나지 않는 경우(Object.is로 비교)에는 컴포넌트를 리렌더링하지 않습니다.

2. 부모 컴포넌트가 리렌더링된 경우
React는 일반적으로 부모 컴포넌트가 리렌더링될 때마다 재귀적으로 자식 컴포넌트를 리렌더링합니다. (🌐 공식 문서 참고) 그 이유는 React가 컴포넌트를 렌더링(호출)하여 반환된 자식 컴포넌트를 재귀적으로 렌더링(호출)하기 때문입니다. 단, React.memo를 사용하여 메모이제이션(Memoization)된 컴포넌트, 그리고 props로 받은 컴포넌트를 렌더 함수에 삽입하는 경우(대표적으로 children)에는 이 규칙에서 제외됩니다.

3. 컨텍스트(context)가 업데이트된 경우
컨텍스트(context)가 업데이트되면 React는 해당 컨텍스트를 useContext 훅으로 참조하는 모든 컴포넌트를 자동으로 리렌더링합니다. (🌐 공식 문서 참고)

4. 커스텀 훅 내부에서 상태 또는 컨텍스트가 업데이트된 경우
커스텀 훅 내부에 있는 모든 것은 커스텀 훅을 사용하는 컴포넌트에 속해 있습니다. 그래서 커스텀 훅의 상태 또는 컨텍스트가 업데이트되면, 훅을 사용하는 컴포넌트가 리렌더링됩니다.

잘못 알려진 리렌더링 트리거 조건

1. 컴포넌트의 props가 변경되는 경우
기본적으로 props는 리렌더링에 영향을 주지 않습니다. 단, memo된 컴포넌트의 경우 props가 변경되어야만 리렌더링됩니다.

2. 컴포넌트의 props가 없는 경우
부모 컴포넌트가 리렌더링된다면 자식 컴포넌트는 props 유무에 상관 없이 리렌더링됩니다. 단, props가 없는 memo된 컴포넌트는 리렌더링되지 않습니다.

2단계: 렌더

“Rendering” is React calling your components - react.dev

• 초기 렌더링의 경우, React는 루트 컴포넌트를 호출합니다.
• 초기 렌더링을 트리거하는 방법은 createRoot를 호출하고 초기 렌더링할 컴포넌트로 render 메서드를 호출하는 것입니다.

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementId('root');
root.render(<Image />); // 초기 렌더링 트리거!

• 리렌더링의 경우, React는 상태가 업데이트되어 렌더가 트리거된 함수 컴포넌트를 호출합니다.
• 이 때 React는 호출된 컴포넌트에서 반환된 자식 컴포넌트를 재귀적으로 호출합니다. 그리고 화면에 표시되어야 하는 내용을 모두 파악할 때까지 재귀적으로 자식 컴포넌트를 호출합니다.
• 리렌더링하는 동안 React는 이전 렌더링과 현재 렌더링 사이의 변경된 속성을 계산합니다. 그리고 DOM에 업데이트해야 할 최소한의 변경 사항을 계산합니다.

3단계: 커밋

• 초기 렌더링의 경우, React는 appendChild() DOM API를 사용하여 렌더 단계에서 생성한 모든 DOM 노드를 화면에 표시합니다.

• 리렌더링의 경우, React는 렌더 단계에서 계산했던 결과를 바탕으로 DOM 노드를 업데이트하여 변경 사항을 화면에 반영합니다.

커밋 이후: 브라우저 렌더링

React 컴포넌트 리렌더링 최적화

합성(Composition)을 사용하여 리렌더링 방지

⛔ 안티 패턴: 컴포넌트 안에서 컴포넌트 정의하기

const Component = () => { // 1. 리렌더링
  const SlowComponent = () => <Something />; // 2. 리렌더링 될 때 마다 함수가 새로 생성되어 컴포넌트를 새로 생성

  return (
    <SlowComponent /> // 3. 다시 마운트
  )
}

const SlowComponent = () => <Something />; // 2. （다시 마운트되지 않는）동일한 컴포넌트인 상태

const Component = () => { // 1. 리렌더링

  return (
    <SlowComponent /> // 3. 다시 렌더링됨
  )
}

✅ 상태를 자식 컴포넌트로 내리기

const Component = () => {
  const [open, setOpen] = useState(false); // 1. 리렌더링 트리거

  return (
    <Something>
      <Button onClick={() => setOpen(true)} /> {/* 1. 리렌더링 트리거 */}
      {isOpen && <ModalDialog />}
      <VerySlowComponent /> {/* 2. 리렌더링 */}
    </Something>
  );
};

const ButtonWithDialog = () => {
  const [open, setOpen] = useState(false); // 1. 리렌더링 트리거

  return (
    <>
      <Button onClick={() => setOpen(true)} /> {/* 1. 리렌더링 트리거 */}
      {isOpen && <ModalDialog />}
    </>
  );
};

const Component = () => {

  return (
    <Something>
      <ButtonWithDialog /> 
      <VerySlowComponent /> {/* 2. 영향을 받지 않음 */}
    </Something>
  );
};

✅ children을 props로 받기 (상태를 children으로 감싸기)

const Component = () => {
  const [value, setValue] = useState({}); // 1. 리렌더링 트리거

  return (
    <div onScroll={(e) => setValue(e)}> {/* 1. 리렌더링 트리거 */ }
      <VerySlowComponent /> {/* 2. 리렌더 */}
    </div>
  );
};

const ComponentWithScroll = ({children}: {children: React.ReactNode}) => {
  const [value, setValue] = useState({}); // 1. 리렌더링 트리거

  return (
    <div onScroll={(e) => setValue(e) }> {/* 1. 리렌더링 트리거 */ }
      {children} {/* 2. props라서 리렌더링 영향 받지 않음 */}
    </div>
  );
};

const Component = () => {

  return (
    <ComponentWithScroll>
      <VerySlowComponent /> {/* 3. 영향 받지 않음 */}
    </ComponentWithScroll>
  );
};

✅ 컴포넌트를 props로 받기

const Component = () => {
  const [value, setValue] = useState({}); // 1. 리렌더링이 트리거됨

  return (
    <div onScroll={(e) => setValue(e)}> {/* 1. 리렌더링이 트리거됨 */ }
      <SlowComponent1 /> {/* 2. 리렌더링 */}
      <Something /> {/* 2. 리렌더링 */}
      <SlowComponent2 /> {/* 2. 리렌더링 */}
    </div>
  );
};

const ComponentWithScroll = ({left, right}: { left: React.ReactNode, right: React.ReactNode }) => {
  const [value, setValue] = useState({}); // 1. 리렌더링이 트리거됨

  return (
    <div onScroll={(e) => setValue(e) }> {/* 1. 리렌더링이 트리거됨 */ }
      {left} {/* 2. props이므로 리렌더링되지 않음 */}
      <Something />
      {right} {/* 2. props이므로 리렌더링되지 않음 */}
    </div>
  );
};

const Component = () => {

  return (
    <ComponentWithScroll>
      left={<SlowComponent1 />} {/* 2. 리렌더링의 영향을 받지 않음 */}
      right={<SlowComponent2 />} {/* 2. 리렌더링의 영향을 받지 않음 */}
    />
  );
};

React.memo를 사용하여 리렌더링 방지

const Parent = () => { // 1. 리렌더
	return <Child />; // 2. 1에 의해 리렌더
};

const MemoizedChild = React.memo(Child);

const Parent = () => { // 1. 리렌더
	return <MemoizedChild />; // 2. 영향 받지 않음
}

✅ 원시 자료형이 아닌 타입을 props로 받는 경우

const MemoizedChild = React.memo(Child);

const Parent = () => { // 1. 리렌더 (Parent의 부모 컴포넌트에 의해)
	return (
		<MemoizedChild
			value={{value}} // 2. 1이 리렌더 될 때 마다 객체가 새로 생성되므로, 리렌더됨.
		/>
	)
}

const MemoizedChild = React.memo(Child);

const Parent = () => { // 1. 리렌더 (Parent의 부모 컴포넌트에 의해)
	const cachedValue = useMemo(() => ({value}), []); // 2. 1이 리렌더 되어도 값 유지
	
	return (
		<MemoizedChild
			value={cachedValue} // 3. 리렌더되지 않음
		/>
	)
}

✅ 컴포넌트 또는 children을 props로 받는 경우

const MemoizedChild = React.memo(Child);

const Parent = () => { // 1. 리렌더 (Parent의 부모 컴포넌트에 의해)
	return (
		<MemoizedChild left={<Something />}> // 2. Something으로 인한 리렌더
			<GrandChild /> // 2. 1에 의한 리렌더
		</MemoizedChild>
	)
}

const MemoizedSomething = React.memo(Something);
const MemoizedGrandChild = React.memo(GrandChild);

cosnt Parent = () => { // 1. 리렌더 (Parent의 부모 컴포넌트에 의해)
	return (
		<Child left={<MemoizedSomething />} // 2. 리렌더되지 않음
			<MemoizedGrandChild /> // 2. 리렌더되지 않음
		</Child>
	)
}

useMemo/useCallback을 사용하여 리렌더링 성능 향상

⛔ 안티 패턴: props에 대한 불필요한 useMemo/useCallback

const Perent = () => { // 1. 리렌더
	const cachedValue = useMemo(() => ({value})
	
	return <Child value={cachedValue} /> // 2. 리렌더 (value 값 변경 여부와 관계 없이)
}

✅ useMemo/useCallback이 필수인 경우

• Object의 경우: useMemo

• 콜백 함수의 경우: useCallback

const MemoizedChild = React.memo(Child)

const Parent = () => { // 1. 리렌더
	const cachedValue = useMemo(() => ({ value }));
	
	return <MemoizedChild value={cachedValue} /> // 2. 리렌더되지 않음
}

const Parent = () => {
	const cachedValue = useMemo(() => ({value}))
	
	useEffect(() => {
		// do something
	}, [cachedValue]);
	
	return ...
}

✅ 무거운 계산 작업을 최적화하기 위한 useMemo

const Component = () => { // 1. 리렌더
	return (
		<>
			<Something />
			<SlowComponent /> // 2. 리렌더
			<SomethingElse />
		</>
	)
}

const Component = () => { // 1. 리렌더
	const slowComponent = useMemo(() => {
		return <SlowComponent /> // 2. 리렌더되지 않음
	}, [])
	
	return (
		<>
			<Somthing />
			{slowComponent} // 2. 리렌더되지 않음
			<SomethingElse />
		</>
	)
}

리스트 리렌더링 성능 향상

1. 배열로 반환되는 컴포넌트의 key 속성(attribute)으로 고유한 string 값을 지정합니다.

2. 리렌더링을 방지하기 위해 React.memo를 사용합니다.

const Component = () => { // 1. 리렌더

	return (
		<>
			{items.map((item) => (
				<Child item={item} key={item.id} /> // 2. 리렌더, key는 리렌더에 영향을 주지 않는다.
			))}
		</>
	)
}

const MemoizedChild = React.memo(Child)

const Component = () => { // 1. 리렌더
	return (
		<>
			{items.map((item) => (
				<MemoizedChild item={item} key={item.id} /> // 2. 리렌더되지 않음 (item이 변경되지 않는다고 가정)
			))}
		</>
	)
)

⛔ 안티 패턴: 리스트에서 key에 랜덤 값을 사용하기

const ChildMemo = React.memo(Child)

const Component = () => { // 1. 리렌더
	return (
		<>
			{items.map((item) => (
				<ChildMemo item={item} key={Math.random()} /> // 2. key 값이 랜덤이라 다시 마운트됨!
			))}
		</>
	)
)

⚠️ 주의: 배열의 인덱스 값 리스트 원소의 key 값으로 사용하는 경우

• 배열이 업데이트되지 않는 경우, 배열의 인덱스를 컴포넌트의 key 속성 값으로 지정해도 괜찮습니다.

• 하지만 배열에 데이터가 삽입되거나 정렬되는 경우, 원소의 데이터에 인덱스가 변경될 수 있으므로 잘 변경되지 않는 고유한 id 값을 사용하는 것이 좋습니다.
1. [’B’, ‘C’, ‘A’]라는 배열에서 ‘C’의 인덱스는 1입니다. 배열을 오름차순으로 정렬하면 [’A’, ‘B’, ‘C’]이므로 ‘C’의 인덱스는 2로 바뀌게 됩니다.
2. 이때 인덱스를 key 값으로 사용하면 컴포넌트가 상태를 가지고 있거나 <input /> 같은 제어되지 않는 원소가 있을 때 버그가 발생할 수 있습니다.
3. 또한 React.memo로 래핑된 엘리먼트가 있으면 성능이 떨어지는 문제가 있습니다.

컨텍스트에 의한 리렌더링 방지

✅ 컨텍스트 값을 memo하기

• Context Provider가 앱의 root 부근에 있지 않고,

• 부모에 의해 리렌더링될 수 있는 가능성이 있다면,

const Component = () => {

	return (
		<Context.Provider value={{value}}>
			{children}
		</Context.Provider>
	)
}

cosnt Component = () => {
	const memoValue = useMemo(() => ({value}), []);
	
	return (
		<Context.Provider value={memoValue}>
			{children}
		</Context.Provider>
	)
}

✅ 데이터와 API를 분리하기

const Component = () => {
	const [state, setState] = useState(); // 1. 상태 변경
	
	const value = useMemo(
		() => {
			data: state,
			api: (data) => setState(data),
		}),
		[state]
	);
	
	return (
		<Context.Provider value={value}> // 2. 모든 provider consumer 리렌더
			{children}
		</Context.Provider>
	)
}

const Component = ({children}) => {
	const [state, setState] = useState(); // 1. 상태 변경
	
	return (
		<DataContext.Provider value={state}>
			<ApiContext.Provider value={setState}> // 2. api provider consumer만 리렌더
				{children}
			</ApiContext.Provider>
		</DataContext.Provider>
	);
}

✅ 데이터를 청크로 분할

const Component = () => {
	const [first, setFirst] = useState(); // first 상태 변경
	const [second, setSecond] = useState();
	
	const value = useMemo(
		() => {({
			first: first,
			second: second,
		}),
		[first, second],
	);
	
	return (
		<Context.Provider value={value}> // 2. 모든 consumer 리렌더
			{children}
		</Context.Provider>
	)
}

const Component = () => {
	const [first, setFirst] = useState(); // first 상태 변경
	const [second, setSecond] = useState();
	
	return (
		<Data1Context.Provider value={first}>
			<Data2Context.Provider value={second}> // 2. second 상태 consumer는 리렌더링되지 않음
				{children}
			</Data2Context.Provider>
		</Data2Context.Provider>
	)
}

✅ Context Selector

const useSomething = () => {
	const { something } = useContext(Context); // 1. something이 변하지 않아도 리렌더 트리거 발생.
	
	return useMemo(() => something, [something]); // 2. 리렌더 방지에 도움 안됨
};

const Component = () => {
	const { something } = useSomething(); // 3. something이 변하지 않아도 리렌더 발생.
	
	return ...
}

1. Context가 업데이트된다.

2. React는 somthing 값이 변경되었는지 여부와 관계 없이 useContext가 포함된 커스텀 훅을 사용중인 모든 컴포넌트를 리렌더링한다.

const withSomething = (Component) => { // 1. 컴포넌트가 메모됨.
	const MemoizedComponent = React.memo(Component);
	
	return () => {
		const { something } = useSomething();
		
		return <MemoizedComponent something={something} /> // 2. something이 변할 때만 리렌더됨
	}
}

const Component = withSomething(({something}) => { // 3. something이 변할 때만 리렌더됨
	return ...
});

1. Context가 업데이트된다.

2. memo된 컴포넌트는 props가 변할 때만 리렌더링된다.

3. 따라서 props로 받는 memo된 somthing이 변하지 않으면 memo된 컴포넌트는 리렌더링되지 않는다.