인프런 커뮤니티 질문&답변
작성한 질문수
리렌더링 관련 문의
작성
·
20
0
toggleTodo = useCallback( ( id : number) => {
<-- 여기 이 지점에 todos 라는 state 값이 필요한 상황 ( 체크 로직 등등.. )
setTodos( (todos) =>
todos.map( (todo) => todo.id === id
? { ...todo, completed:
!todo.completed
}
: todo
);
}, []);
위 부분에 todos 의 state 값이 필요하게 되면 의존성 배열에 todos 를 넣어줘야 될꺼 같은데요.
이렇게 되면 React.memo 에 의해 전달될 toggleTodo props 도 변경되게 될것으로 예측 되고 결국 자식 컴포넌트들이 리렌더링이 계속 발생되지 않을까 싶은데요.
위 부분에 todos 의 state 값이 필요하게 될 경우에는 어떻게 처리를 해줘야 될까요?
답변 2
0
안녕하세요.
useCallback의 의존성 배열에 무엇을 넣어야 하는지는,
해당 함수 안에서 어떤 방식으로 상태를 사용하는지에 따라 달라집니다.
일반적으로 todos 상태를 의존성 배열에 그대로 넣게 되면,todos가 변경될 때마다 함수가 새로 생성되기 때문에useCallback을 사용하는 의미가 줄어들 수 있습니다.
다만, 이는 함수 내부 로직에 따라 달라질 수 있는 부분이므로
구체적으로 어떤 코드를 작성하려는지 알려주시면
더 적절한 패턴과 함께 설명드릴 수 있을 것 같습니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 최병국님.
useCallback을 사용할 때 의존성 배열에 상태 값(todos)을 포함시키면, 해당 상태가 업데이트될 때마다 콜백 함수가 새로 생성됩니다. 이로 인해 React.memo에 의해 props로 전달되는 toggleTodo 함수가 변경된 것이 인식되어 자식 컴포넌트의 불필요한 리렌더링이 발생할 수 있습니다.
리렌더링 문제를 해결하기 위한 방법은 다음과 같습니다:
상태 관리 최적화: 상태 구조를 재조정하여 변경이 적게 발생하도록 관리하거나 필요한 데이터만 포함하도록 리팩토링합니다.
useReducer 활용: 복잡한 업데이트 로직은 useReducer를 통해 관리할 수 있습니다. useReducer는 상태와 함께 변화를 일으키는 함수를 분리하여 관리하므로, 상태 변경이 명확하게 추적 가능하게 됩니다.
상태 분리: 상태를 좀 더 세분화하여 필요한 경우에만 특정 부분이 업데이트되도록 할 수 있습니다.
타입스크립트의 이점 활용: 타입 시스템을 이용해 상태와 관련된 다양한 처리를 좀 더 명확하게 다룰 수 있습니다.
이와 관련된 추가적인 학습을 도와드릴 수 있는 참고 링크를 제공해드립니다:
- React에서 useCallback과 자식 컴포넌트의 리렌더링 최적화 방법
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.