여러 개발자 유튜버를 구독하여, 최신 소식이나 도움이 될 만한 동영상을 줄곧 보곤 하는데,
오늘은 프롱트님이 다뤄주신 리액트를 잘한다는 것을 그대로 발췌해보았다.
아직 고민해보지 않았던 주제들이 꽤 있어, 일부는 와닿지 않았지만, 일단 적어두고 나중에 수정, 추가하려고 한다.
1. 상태관리
- 복잡한 App -> 상태가 많아지면
- 전역에 노출된 상태를 관리하기 어려움
- 상태를 좁혀야함
- 높은 수준의 상태는 전역변수를 사용해야하는 지의 고민이 따름
- 불필요한 라이브러리 사용 금지
- 리액트 훅 API만으로도 충분
- useState, useReducer
- 서버상태, 서버와 연동되는 부분은 서버상태로 관리하여 취급해서 관리하는 것이 좋음
- react-query, SWR 활용
- 서버상태를 프론트엔드에서 보관하지 않는 것이 좋음
2. 구조 아키텍쳐
- 디렉토리를 계층적으로! (가독성)
- 찾기 쉬운 서랍장처럼 디렉토리 구조를 만드는 것이 좋음
3. 읽기 좋은코드(클린코드)
- 리액트라고 다를건 없음
- 가독성 좋은 네이밍, 일관성을 유지: 의도가 잘 들어나게끔!
- 디렉토리 이름(동사 X)
- 파일 이름(동사 X)
- 함수명(동사 + 명사)
- 변수명(명사)
4. 컴포넌트스러운 컴포넌트
- 하나의 컴포넌트는 하나의 역할을 하도록(단일책임원칙!) SOLID 중 S
- 컴포넌트 하나의 컴포넌트가 너무 크지 않도록 구현
- 컴포넌트를 작게 나누는 것은 장점이 있음
- 의존성 제거. 변경이 생기면 다른 컴포넌트에 영향을 주지 않음
- 다른 UI에 이를 재사용하는 것도 가능
5. 중복코드
- 비슷한 컴포넌트? 재사용가능한 컴포넌트(공통 로직)로
- 컴포넌트 내의 복잡한 비즈니스 로직이나 이벤트 처리가 있다면
- 커스텀 훅으로 활용
- 재사용 컴포넌트로 발전시키기
6. 최적화 API를 잘 활용(주니어에게 꼭 요구하는 부분은 아니지만, 고려해볼 것)
- 리액트의 문제를 스스로 진단(문제점 찾기. 일종의 프로파일링)
- 다양한 API와 추천 방식을 활용해서 개발.
- useMemo, react.memo, useCallback 등
- 라이브러리를 사용하고 있다면 캐시기능도 잘 활용(데이터 활용 시)
7. 끊김없는 UX(성능)
- 데이터 통신 직렬과 병렬을 주의해서 진행
- Loading Indicator
- useTransition / useDeferredValue와 같은 훅을 잘 사용하기
- SSR(Streaming)을 써도 Suspense 기능을 잘 활용해볼 것.
8. 비즈니스 요구사항에 따른 리팩토링
- 위의 내용은 무조건 따를 사항은 아님
- 서비스의 변경이 자주 일어나는 스타일
