[Seoin] React Hooks

[Seoin02]

구현 목록

• useState
• useEffect
• useCallback
• useMemo

배운 점

• useState가 클로저 기반으로 동작해야 하는 건 렌더링 후에도 state가 초기화 되지 않고, 유지돼야 하기 때문입니다. 그래서 state를 컴포넌트 외부에서 관리해야 합니다. 실제로 hook 내부에서 state를 관리했을 때, 리렌더링 시 state가 초기화돼 제대로 동작하지 않았습니다. 이때 클로저를 기반으로 동작해야 한다는 것을 깨달았습니다.
• 이렇게 만들어진 hook들은 함수의 최상위에서 사용해야 합니다. 각 컴포넌트마다 state가 배열로 관리되는데, 이 배열에서 hook을 호출하는 순서대로 상태를 저장하기 때문에 리렌더링 시에도 같은 순서로 접근해야 기존 상태를 유지할 수 있습니다. 그런데 반복문, 조건문 등에 hook을 사용하면 상태 순서가 변할 수 있기 때문에 제대로 동작하지 않을 수 있습니다.
• useCallback과 useMemo를 많이 사용해보지 않았는데, 구현하면서 차이를 알게 됐습니다. useCallback은 의존성이 변하지 않으면 리렌더링 시 같은 함수를 반환해(캐싱) 불필요한 함수 재생성을 방지합니다. useMemo는 의존성이 변하면 callback 함수를 실행해 새 값을 생성하고, state에 새 값을 저장합니다. 반대로 의존성이 변경되지 않으면 이전에 이전에 저장한 값을 반환합니다. 이 기술을 메모이제이션이라고 합니다.

고민과 느낀 점

• 처음에 하나의 state를 구현한 hook들이 공유하게 했는데, 그러면 원하는 대로 동작의 결과가 나오지 않는다는 것을 알게 돼 Map을 사용해 각 hook의 상태를 따로 관리하게 했습니다.
• 아직 useCallback과 useMemo를 사용해야 할 경우(최적화 할 경우)를 판단하기 어렵습니다. 동현님이 이 hook들을 사용하는 기준이 궁금합니다.

[D5ng]

저도 useCallback과 useMemo를 많이 사용해보진 않았는데, 기준은 정해놨습니다.

1. 데이터 연산 작업이 꽤 복잡하다고 느끼면 useMemo를 사용합니다.
2. 컴포넌트가 깊어지는 상황에서 부모 컴포넌트가 리렌더링 된다면 useCallback을 사용하려고 합니다.

우선 사용했을 때와 사용하지 않았을 때를 React dev tools로 비교하는것이 가장 좋은 방법이라고 생각합니다.

저도 특정 수치 이상일 때 메모이제이션을 사용할거다. 라고 정의는 못내렸지만, 시이드 프로젝트에서는 메모이제이션 비용이 더 많이 들지 않나 라는 생각이 드네요.

제가 다른걸 하느라, 제대로 구현을 하지 못했지만 useCallback과 useMemo 부분을 업데이트 할 생각이에요.

[D5ng]

getComponentState 라는 네이밍도 좋고, Map을 사용한 것도 좋아보이네요.

하나 궁금한건 component를 매개변수로 받는데, 이 컴포넌트는 결국 루트 컴포넌트 아닌가요 ????

루트 컴포넌트가 아닌 커스텀 컴포넌트들도 받는건지 궁금합니다