린캔버스 수정 시 CanvasDetail 컴포넌트 리랜더링 질문

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

[수정] 린캔버스 수정 1

작성

안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다.

  const handleCanvasChange = async updatedCanvas => {
    try {
      await updateCanvas(id, updatedCanvas);
      setCanvas(updatedCanvas);
    } catch (err) {
      alert(err.message);
    }
  };

addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다.

const [canvas, setCanvas] = useState();

canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?

react React-Context react-router tailwindcss react-query

답변 2

짐코딩

지식공유자

안녕하세요 아래 체크 포인트를 확인해 보시겠어요?

LeanCanvas.jsx - handleNotesChange 함수를 확인하세요:

const handleNotesChange = (section, updatedNotes) => {
  const updatedCanvas = {
    ...canvas,  // ← 이게 있나요?
    [section]: { ...canvas[section], notes: updatedNotes }, // ← 여기도 스프레드 두 개 다 있나요?
  };
  onCanvasChange(updatedCanvas);
};

...canvas 누락 → 다른 섹션 데이터 사라짐
...canvas[section] 누락 → 해당 섹션의 다른 속성 사라짐

위 코드를 살펴보시면 도움이 될 것 같아요~!

inflearn1

질문자

넵 다 있습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. inflearn1님.

리액트의 리렌더링 문제는 종종 상태 관리와 컴포넌트의 설계가 밀접하게 연관되어 발생합니다. 특히, 특정 조건에서 하위 컴포넌트의 상태가 의도와 다르게 초기화되는 경우는 개발자들에게 혼란을 줄 수 있습니다. 질문하신 CanvasDetail과 그 하위 컴포넌트들이 리렌더링되면서 Note의 isEditing 값이 초기화되는 문제에 대한 이해를 돕기 위해 몇 가지 포인트를 설명해 드리겠습니다.

주요 원인 및 해결 방법

상태(State) 관리:
- setCanvas(updatedCanvas)를 호출하게 되면, 리액트에서 canvas와 관련된 모든 컴포넌트들이 리렌더링될 수 있습니다. 이 때, 하위 컴포넌트인 Note에서 isEditing과 같은 상태가 부모 컴포넌트의 상태변경으로 인해 초기화될 수 있습니다.
useState와 상태 초기화:
- 각 Note 컴포넌트가 독립적인 상태 isEditing을 가지지만, 부모의 상태나 props가 변할 때 리렌더링 되며 상태가 초기화될 수 있습니다. 이를 해결하기 위해서는 Note 컴포넌트가 상태를 유지할 수 있도록 부모와 자식 간의 상태 관리 전략을 다시 점검할 필요가 있습니다.
React가 제공하는 최적화 기법 사용:
- React.memo 같은 최적화 기법을 이용하여, 특정 props가 변경되지 않는 한 하위 컴포넌트가 리렌더링되지 않도록 할 수 있습니다. Note 컴포넌트를 React.memo로 감싸고 리렌더링 조건을 제어할 수 있습니다.

해결을 위한 보완 방안

하위 컴포넌트에서 리렌더링이 필요하지 않은 요소들은 상태를 컴포넌트 내부에서 관리하거나, 적절한 방법으로 useEffect 훅을 활용하여 점검할 수 있습니다.

관련하여 아래의 링크들을 참고하시면 도움이 될 것입니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변