React Component가 리렌더링 되는 이유

웹 플젝 하던 중 Context, 모달, 소켓 등이 짬뽕되자 원하지 않는 부분에서 자꾸 렌더링이 되는 문제가 있어서 알아본 내용.

---

Component가 리렌더링 되는 경우들

1. State가 변경될 때: 컴포넌트의 state가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들이 리렌더링됩니다.

    this.setState({ value: newValue });

2. Props가 변경될 때: 부모 컴포넌트에서 전달되는 props가 변경되면 자식 컴포넌트가 리렌더링됩니다.

    <ChildComponent propValue={this.state.value} />

3. 부모 컴포넌트가 리렌더링될 때: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링됩니다.

4. forceUpdate가 호출될 때: forceUpdate 메서드를 호출하면 강제로 컴포넌트가 리렌더링됩니다.

    this.forceUpdate();

5. Context가 변경될 때: React Context의 값이 변경되면 이를 구독하고 있는 모든 컴포넌트가 리렌더링됩니다.

    <MyContext.Provider value={newValue}>

1. 훅의 의존성이 변경될 때: useEffect, useMemo, useCallback 등의 의존성 배열에 있는 값이 변경되면 컴포넌트가 리렌더링 될 수 있다.

리렌더링을 방지하는 방법

• React.memo 사용: 함수형 컴포넌트를 메모이제이션하여, props가 변경되지 않으면 리렌더링을 방지할 수 있습니다.

    jsx
    Copy code
    import React from 'react';
  
    const MyComponent = React.memo(({ prop1, prop2 }) => {
      // 컴포넌트 로직
    });
  

• useMemo 사용: 비용이 많이 드는 계산을 메모이제이션하여, 의존성 배열의 값이 변경되지 않으면 계산을 재사용할 수 있습니다.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useCallback 사용: 함수의 메모이제이션을 통해 불필요한 함수 재생성을 방지하고, 의존성 배열의 값이 변경되지 않으면 같은 함수를 재사용할 수 있습니다.

    const memoizedCallback = useCallback(() => {
      doSomething(a, b);
    }, [a, b]);

• useRef 사용: 컴포넌트 내에서 유지해야 하는 값이 있지만, 그 값의 변경이 리렌더링을 유발하지 않아야 하는 경우 사용합니다.

    const countRef = useRef(0);
    countRef.current++;

• useEffect의 Cleanup 함수 사용: 불필요한 리렌더링을 방지하기 위해, 컴포넌트가 언마운트될 때 또는 다음 이펙트 실행 전에 정리 작업을 수행합니다.

    jsx
    Copy code
    useEffect(() => {
      const handle = setSomeResource();
  
      return () => {
        clearSomeResource(handle);
      };
    }, [dependency]);
  

메모

• state, props의 값 체크는 얕은 비교로 이루어 진다. ( 1단계 깊이만 비교 )

---

관련 내용

https://www.telerik.com/blogs/understand-how-rendering-works-react#:~:text=Rendering%20is%20React's%20process%20of,the%20UI%20need%20an%20update

https://www.reddit.com/r/reactjs/comments/1977xg1/react_state_and_rendering_process/

https://dev.to/mateo_garcia/understanding-rendering-in-react-i5i

https://joong-sunny.github.io/react/react1/