3월7일 TIL

React 컴포넌트의 재랜더링 조건

• 팀 프로젝트 진행중에 부모에서 내려준 props값이 변경 되었는데 재 랜더링 되지 않는상황이 발생되었다

나의코드

  const deleteCategoryHandler = (categoryId: number) => {
    const findCategoryIndex = categoryList.findIndex((el) => {
      return el.categoryId === categoryId;
    });
    categoryList.splice(findCategoryIndex, 1);
  };

• 해당 코드는 Category를 삭제하는 로직이고 나의 안일한 생각으로..
  • 부모에서 props로 내려준 값이..변경됐는데 왜 재랜더링이 안돼?라고 생각했다
    • 너무나도 멍청했다..
  • 그런김에 정리해보는 React의 컴포넌트가 리랜더링 되는 조건!

---

조건 1. props 변경

• 부모 컴포넌트에서 전달되는 props가 변경될 때 해당 컴포넌트는 리렌더링됨

조건 2. state 변경

• 컴포넌트 내부의 state가 변경될 때 해당 컴포넌트는 리렌더링됨

조건 3. forceUpdate() 호출

• 메서드가 호출될 때 해당 컴포넌트는 리렌더링 됨

조건 4. context 변경

• 컴포넌트가 속한 context가 변경될 때 해당 컴포넌트는 리렌더링됨

조건 5. 부모 컴포넌트 리렌더링

• 부모 컴포넌트가 리렌더링될 때 해당 컴포넌트도 리렌더링됨
  • 또한, React는 기본적으로 "얕은 비교"를 수행해서 props와 state를 비교함
    • props나 state가 객체 또는 배열일 경우, 참조값만 비교한다는 사실..
    • 객체 또는 배열이 변경되었는데 참조값이 동일하다면, 해당 컴포넌트는 리렌더링되지 않는다고 한다..

객체나 배열의 내부값이 변경되어야 해당 컴포넌트가 리렌더링되어야 한다면

• 새로운 객체나 배열을 생성하여 props나 state에 전달해줘야함
  • 이걸 "불변성 유지"라고 함
  • 불변성을 유지하면, React가 얕은 비교를 수행하여 변경된 값을 감지할 수 있다고함