코딩자율학습 리액트 프런트엔드 개발 입문 3주차 학습 후기

이번주에는 리액트 훅과 성능 상태 관리에 대한 부분을 공부했습니다. useId와 useEffect로 접근성과 사이트이펙트를 정리하고, React.memo, useCallback, useMemo로 불필요한 리렌더링을 줄였으며, React.lazy/Suspense등과 Context, Redux Toolkit, Zustand를 비교해 프로젝트에 맞는 전역 상태 전략을 정리해봤습니다.

11일차 : 고유 아이디와 사이드 이펙트

useId 훅을 공부하면서 input과 label을 안전하게 연결하는 방법과 라디오 그룹처럼 id가 필요한 요소들을 직접 관리할 때 생기는 중복 문제를 훅이 어떻게 해결해주는지 이해했습니다. 그리고 useEffect를 통해 컴포넌트가 마운트 될 때 데이터 패치, 상태가 바뀔 때 특정 동작 실행, 언마운트 시 정리 작업을 어떻게 구조화할지 연슴했습니다.

의존성 배열을 잘못 관리하면 의도치 않은 반복 호출이나 누수가 생길 수 있다는 점을 알게 되며, 빈 배열로 마운트 시만 실행하거나 특정 상태를 의존하게 하는 패턴을 이해했습니다.

12~13일: 컴포넌트 최적화

리렌더링과 성능 최적화에 대해 이해하는 시간이였습니다. 컴포넌트 메모이제이션(React.memo)으로 props가 변하지 않을 때 재렌더링을 막고, props로 내려주는 함수를 useCallback으로 감싸 재생성을 방지하는 식으로 부모-자식간 불필요한 렌더링을 줄이는 방법을 배웠습니다. 또한 값 계산 비용이 큰 부분은 useMemo로 캐싱해 필요한 시점에만 재계산하도록 해 성능을 개선했고, 이 모든 메모이제이션은 실제 성능에 도움될 때만 쓰는게 중요하다는 것을 알게되었습니다.

초기 로딩 최적화는 React.lazy와 Suspense로 코드 스플리팅을 적용해 보고, 로딩 중 보여줄 UI와 에러 처리에 ErrorBoundary를 적용해 사용자 경험을 매끄럽게 만드는 연습을 했으며, 리액트 19 이후에 도입된 useDeferredValue와 useTransition의 활용법도 살펴보았습니다.

14~15일차: 전역 상태 관리

전역 상태 관리를 공부했는데, 로컬 상태와 전역 상태의 차이를 이해하고, 간단한 전역값은 Context API로 빠르게 고유하며, Context가 값 변경 시 하위 전체를 렌더링할 수 있다는 점을 알게 되었습니다. 규모가 커질 경우 Redux Toolkit으로 슬라이스 단위의 구조적 상태 관리와 디버깅 툴을 활용하는 방법을 배웠으며, 더 간단하고 선언적인 대안으로 Zustand를 이용해 스토어를 만들고 필요한 컴포넌트만 활용하는 방법을 배웠습니다.

3주차 마무리

이번 주는 useId, useEffect로 폼 접근성을 다듬고, 메모이제이션과 코드 스플리팅으로 성능을 개선해 즉시 가시적 효과를 봤습니다. Context, Redux Toolkit, Zustand를 비교 적용해 전역 상태 구조를 단순화했습니다.

빌드 후 실제 페이지에서 동작을 확인하며 실제 적용한 최적화등이 어떻게 작동되는지 이해할수 있는 시간이였습니다.