파일 최상단에 오지 않으면 문법상 오류가 발생합니다. Prettier에 의해 자동으로 순서가 정리됩니다.
컴포넌트 내부에서 사용 되는 상수는 import 아래 작성합니다.
만약 이 상수가 다른 파일에도 중복사용 된다면 따로 파일을 분리하여 작성하는걸 고려해보세요.
Props 는 컴포넌트 상단에 작성합니다.수정 및 확인을 용이하게 하기 위함입니다.
앞서 필요한 부분이 전부 선언 되었기에 이 단계에서 작성합니다.
특별한 이유가 없다면 현재 컴포넌트를 마지막 줄에서 export default로 작성해줍니다.
useState, useRef와 같은 React에서 기본적으로 제공하는 hooks 입니다.
다만 useEffect의 경우 하단에서 작성하는데, Side Effect 탭에서 사유를 좀 더 상세하게 서술하겠습니다.
설치한 Library의 hooks와 직접 구현한 Custom Hooks입니다.
state와 같이 필요한 부분을 Props로 전달하여 사용하는 경우도 많기 때문에 일반적으로 React Hooks 아래에 작성됩니다.
상수가 아닌 특정 상태(state)에 따라 변하는 변수들이 일반적으로, state 아래에 선언하여 사용합니다.
또한 여러 상태를 지켜보거나 계산이 무거운 값 들은 useMemo 로 최적화를 고려해보세요.
함수 또한 파라미터로 전달받기도 하지만 state와 변수를 그대로 참조하여 쓰는 경우도 있기 때문에 state와 변수 아래 선언합니다.
필요에 따라 유틸성 / 순수함수들은 컴포넌트 외부로 분리하는 것도 고려해보세요.
useEffect로 관리되는 Side Effect는 Component return 바로 위에 작성합니다.
특정 상태나 함수에 의존하여 실행되어야 하는 로직들이 대부분이기 때문에 상태나 함수의 하단에 작성되어야 합니다.
의존성(dependency) 때문에 생기는 문제가 잦기 때문에 의존성 별로 useEffect 분리를 고려해보세요.
이렇게 분리된 여러개의 useEffect 가 작성 되었을 때 Custom Hooks로 관리하지 않는다면 추후 코드 수정 시 의존성 만으로 로직 파악이 어려울 수 있습니다.
따라서 주석으로 간단한 추상화를 권장합니다.
