[트러블 슈팅] 커스텀 훅의 업데이트가 반영되지 않을 때

[개인 프로젝트] 올림픽 메달 트래커를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다.

커스텀 훅의 상태가 업데이트 됐는데 컴포넌트가 렌더링이 되지 않음

발생한 오류 🔥

국가 추가, 수정, 삭제를 커스텀 훅으로 따로 관리하고 해당 기능이 필요한 곳에서 `useCountry` 훅을 호출하는 방식으로 코드를 수정했는데 국가 추가를 눌렀을 때 `InputGroup` 컴포넌트에서 발생한 `addCountry` 함수는  잘 동작하지만 `MedalList` 컴포넌트에서 리스트가 보이지 않는 문제 발생.

 

해결 과정 🔎

https://react.dev/learn/reusing-logic-with-custom-hooks

Reusing Logic with Custom Hooks – React

 

해당 원인을 파악하고자 리액트 공식문서의 커스텀 훅 동작 원리에 대해서 찾아봤습니다.

 

✨여기서 새로운 사실을 알게 되었습니다.✨

 

커스텀 훅의 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. 공식문서 활용하기

공식문서를 읽어보니 생각보다 잘 되어 있어서 놀랐습니다. 앞으로 공식 문서를 잘 활용하는 게 좋을 것 같은 생각이 들었습니다.