[TIL] 23.04.18.

오늘의 학습 내용

• 리액트 숙련 강의 수강

새로운 배움

• 리액트 useState 비동기 진행 (함수형)
• 리액트 자주 사용하는 훅에 대한 정리 (useState, useEffect, useRef )
• 리액트 전역 관리 방법 1 (contextApi)
• 리액트 최적화 방법 1 (React.memo, useCallback, useMemo)
• 리액트 라이프 사이클

문제 상황과 시도, 해결

• 함수형 컴포넌트에서 useState를 통해서 여러 state를 관리하고 있었다. 하나의 state가 업데이트 되고 난 다음 다음 순차적으로 다른 동작을 구현했어야 했다. 자꾸 값이 일정하게 반영되지 않아서 확인해보니 리액트의 훅들은 배치로 처리 된다고 하였다. (비동기처리)
• 처음에는 이 문제를 해결하기 위해서 리액트 useEffect를 사용해서 관리하고 있던 state가 변경되면 순차적으로 값이 변경되도록 로직을 처리하였다. 하지만 과하게 훅을 사용하여 랜더링이 반복적으로 이루어지고 불필요한 의존성 배열이 생기는 것이 아닌것 같다는 생각에 고민이었다. 여기저기 방법을 구하던 찰나, 아예 state 변경 후 처리해야 할 값을 전역으로 빼서 관리하고있었다. 이 부분에 대해 고민하다가 useState의 경우 함수로로직을 처리가 가능하다는것을 알고 간단한 함수를 구현해서 처리했다.

느낀점

리액트를 공부하며 새로운 개념을 알게되고 활용방법을 찾지못하는데 알게된 개념을들 한번 정리하면서 어떻게 활용할수 잇을지 생각해보는 시간이 필요하다고 생각했다.

관련 작성글

[리액트] Hooks - useState
[리액트] Hooks - use Effect
[리액트] 리액트 최적화 방법의 비교 - 작성중입니다.