[개인 프로젝트] 올림픽 메달 트래커를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다.
커스텀 훅의 상태가 업데이트 됐는데 컴포넌트가 렌더링이 되지 않음
발생한 오류 🔥
국가 추가, 수정, 삭제를 커스텀 훅으로 따로 관리하고 해당 기능이 필요한 곳에서 `useCountry` 훅을 호출하는 방식으로 코드를 수정했는데 국가 추가를 눌렀을 때 `InputGroup` 컴포넌트에서 발생한 `addCountry` 함수는 잘 동작하지만 `MedalList` 컴포넌트에서 리스트가 보이지 않는 문제 발생.
해결 과정 🔎
https://react.dev/learn/reusing-logic-with-custom-hooks
Reusing Logic with Custom Hooks – React
The library for web and native user interfaces
react.dev
해당 원인을 파악하고자 리액트 공식문서의 커스텀 훅 동작 원리에 대해서 찾아봤습니다.
✨여기서 새로운 사실을 알게 되었습니다.✨
커스텀 훅의 State가 변경되면 이를 사용하는 다른 컴포넌트가 리렌더링 될 거라 생각했지만 공식 문서를 확인해 본 결과 커스텀 훅은 State 그 자체를 공유하는 게 아닌 State 저장 로직을 공유한다.
그래서 같은 훅을 호출하더라도 각각의 호출은 독립되어 있기 때문에 이 점을 간과해서 발생한 에러였습니다.
해결 방법 ✨
`InputGroup``MedalList`에서 각각 호출하던 커스텀 훅을 전역에서 호출하고 props로 전달해 주는 방식으로 사용해 보니 잘 동작되는 걸 확인했습니다.
const App = () => {
const {
inputValue,
medalList,
addCountry,
updateCountry,
deleteCountry,
onChangeHandler,
} = useCounty();
return (
<Container>
<Header />
<InputGroup
inputValue={inputValue}
addCountry={addCountry}
updateCountry={updateCountry}
onChangeHandler={onChangeHandler}
/>
<MedalList medalList={medalList} deleteCountry={deleteCountry} />
</Container>
);
};
깨달은 점 ❕
1. 공식문서 활용하기
공식문서를 읽어보니 생각보다 잘 되어 있어서 놀랐습니다. 앞으로 공식 문서를 잘 활용하는 게 좋을 것 같은 생각이 들었습니다.
![](https://t1.daumcdn.net/keditor/emoticon/niniz/large/002.gif)
'공부 > 트러블 슈팅' 카테고리의 다른 글
[트러블 슈팅] 카카오맵 API를 활용한 캠핑장 데이터 렌더링 최적화 (0) | 2024.09.19 |
---|---|
[트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 (0) | 2024.09.15 |
[트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) (1) | 2024.09.11 |
[트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) (1) | 2024.09.02 |
[트러블 슈팅] 방콕 스타일 (supabase RLS 오류) (0) | 2024.09.02 |
[트러블 슈팅] 포켓몬 도감 (svg, router, 이벤트 버블링) (0) | 2024.08.26 |
[트러블 슈팅] styled-components 오류 (표준, 비표준 속성) (2) | 2024.08.16 |
[트러블 슈팅] 영화 검색 사이트 (TypeError, 애니메이션, 이미지 로딩) (0) | 2024.08.05 |