TIL-23.06.12

 

문제점

부모컴포넌트가 재렌더링되어도 자식 컴포넌트를 유지하는 방법이 필요했다.

자식컴포넌트로 타이머를 렌더링하고있기에, 자식컴포넌트가 유지가 안되면 타이머가 처음으로 되돌아가는 현상이 발생했다.

 

 

 

 

 

시도한점

1. 자식컴포넌트에 'React.memo()' 사용

 - React.memo 함수는 자식 컴포넌트의 속성(props)가 변경되지 않으면 재렌더링을 방지한다.

const ChildComponent = React.memo(({ prop1, prop2 }) => {
  // 자식 컴포넌트의 렌더링 로직
});

const ParentComponent = () => {
  const [state, setState] = useState('');

  return (
    <div>
      {/* 부모 컴포넌트의 렌더링 로직 */}
      <ChildComponent prop1={state} prop2={someValue} />
    </div>
  );
};

  

 

 

2. 자식 컴포넌트에 고유한 키(key)값 할당

  - 자식 컴포넌트에 고유한 키(key)를 할당하면 리액트는 해당 컴포넌트가 재사용 가능하다고 인식한다.

  - 부모컴포넌트가 재렌더링될 때 키값이 변경되지 않는 한 리액트는 해당 자식 컴포넌트를 유지한다.

const ParentComponent = () => {
  const [state, setState] = useState('');

  return (
    <div>
      {/* 부모 컴포넌트의 렌더링 로직 */}
      <ChildComponent key={someKey} prop1={state} prop2={someValue} />
    </div>
  );
};

 

 

두개의 방법 중 내가 선택한 방법은 React.memo()함수를 사용한 방법이다. 

앞으로 코드 최적화 작업도 꾸준히 진행할예정인데 , 불필요한 렌더링을 잡기위해 React.memo() 함수의 사용을 고려해봐야겠다.