리액트를 잘한다는 것이 뭘까

오늘 했던 것

• 리액트 개인 과제 투두리스트 업데이트
• 리액트 기본기 강의 수강
• 리액트 관련 공부

오늘 고민했던 것

• Array의 메소드 중 reduce
• 리액트를 잘 다룬다는 것이 어떤 것인가 찾아봤다.

리액트를 잘 다룬다는 것

1. 상태 관리

• 프로젝트가 커지면 state를 다루는 것이 어려워지기 때문에
  전역 state를 줄이는 방향으로 개발을 하자.
• 불필요한 라이브러리 사용을 지양하자.
  간단한 상태 관리 같은 경우에는 useState(), useReducer() 같이
  라이브러리의 장점을 일부 가지고 있는 Hook들만으로도 충분하다.
• 서버와 연동이 되는 부분은 서버 상태로 분류하여 관리하는 것이 좋다.
  (SWR, React Query 등을 이용 / 프론트엔드에서 서버상태를 보관하는 것을 지양)

2. 구조 아키텍쳐

• 디렉토리 구조부터 계층적으로 만들자.
  예). 하위 요소들을 차곡차곡 연관 된 파일들끼리 정리
  최상위 - asset, util, component, common, API ...
  / component 하위 - 해당 component가 맡은 기능 이름 ...
  / 연관되어 있는 하위 component ...

3. 읽기 좋은 코드

• 파일 이름은 가독성이 좋은 이름을 사용하고, 일관성을 유지하자.
  디렉토리 이름 - 대부분 명사
  파일 이름 - 대부분 명사
  함수 이름 - 명사 + 함수 (~를 하다, InputHandler, changeUserData)
  변수명 - 직관적으로 의도가 잘 보이도록

4. 자연스러운 컴포넌트

• 하나의 컴포넌트는 하나의 역할을 하도록 하자.
  (SOLID 디자인 패턴)
• 하나의 컴포넌트가 커지지 않도록
  하위 컴포넌트로 나누어 관리하자.
• 컴포넌트를 나누는 것의 장점
  • 의존성 제거, 변경이 생기면 다른 컴포넌트에 영향을 주지 않는다.
  • 컴포넌트 재사용성이 좋아진다.
• 컴포넌트를 나누는 것의 단점
  • 컴포넌트가 많아져 관리가 어려워진다.

5. 중복코드 정리

• 비슷한 컴포넌트 (버튼 같은 요소)
• 컴포넌트 내의 복잡한 로직이 이나 이벤트 처리가 있을 때
  • 커스텀 훅으로 만들어 사용 (fetch 후 에러처리 등)
  • 재사용 컴포넌트로 발전시키기 (공통 컴포넌트를 만들려는 노력을 하자)

6. 최적화 API 활용

• 리액트의 문제를 스스로 진단하여 문제점을 찾자 (개발자 도구 활용)
  • 복잡한
• 다양한 API와 추천 방식을 활용해서 개발
  • useMemo, react.memo, useCallback 등
    (Memoization 패턴, 리렌더링 막기, 함수 재사용 등..)
• 라이브러리를 사용 중이라면 캐시 기능도 활용하자

7. 끈김없는 UX

• 데이터 통신 직렬과 병렬을 주의해서 진행
  데이터 통신 - 직렬 방식 / 병렬 방식
• loading indicator 사용
• userTransition, useDeferredValue 훅 사용
• SSR을 사용한다면 suspense 기능을 활용
  suspense란?

8. 비즈니스 요구사항에 따른 리팩토링

• 위의 1 ~ 7까지의 내용을 무조건 따를 필요는 없음. (일반적인 사항들일뿐)
• 서비스에 잦은 변경에도 잘 대응하는 컴포넌트 구조.

느낀점

• 아직 디자인 패턴이나 비즈니스 로직, Hook, 전략 등
  모르는 용어들이 많아서 오늘 학습한 부분에서 모르는 내용을
  하나씩 배워나가며 적용해보고 나의 이전 코드들과 비교해보고 싶다.