# Code Style

이 문서는 컴포넌트 파일에서 **코드를 작성하는 순서에 관한 방법**들을 담고 있습니다.

**선언 순서로 인해 발생하는 Side Effect를 줄이고** 파일 내에서 필요한 로직을 찾을 때 **문서의 색인(index)와 같은 역할을** 하기 위해 작성되었습니다.

## 1. 파일 내 선언순서

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2Ft5eV53Jp8wfKZyv83V8a%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-15%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.13.18.png?alt=media&#x26;token=f2f1e3fe-5561-4c35-9ad0-82adbf85f3e8" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="1. Import" %}
&#x20;**파일 최상단에 오지 않으면 문법상 오류**가 발생합니다. **`Prettier`**&#xC5D0; 의해 **자동으로 순서가 정리**됩니다.
{% endtab %}

{% tab title="2. Const" %}
**컴포넌트 내부에서 사용 되는 상수**는 **import 아래 작성**합니다.

만약 이 상수가 다른 파일에도 중복사용 된다면 따로 **파일을 분리하여 작성하는걸 고려**해보세요.
{% endtab %}

{% tab title="3. Props Type" %}
`Props` 는 컴포넌트 상단에 작성합니다.수정 및 확인을 용이하게 하기 위함입니다.
{% endtab %}

{% tab title="4. Component" %}
앞서 필요한 부분이 전부 선언 되었기에 이 단계에서 작성합니다.
{% endtab %}

{% tab title="5. Export" %}
특별한 이유가 없다면 현재 컴포넌트를 마지막 줄에서 **`export default`**&#xB85C; 작성해줍니다.
{% endtab %}
{% endtabs %}

## 2. 컴포넌트 내부 선언 순서

<figure><img src="https://1168173052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9A2Jt7XcUkiyMXRHBecz%2Fuploads%2F22DLC0kaW3aBWG9VIlTo%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-15%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.13.37.png?alt=media&#x26;token=602da6bb-cedb-4dd2-b155-0ba91ddb5ea9" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="React Hooks" %}
`useState`, `useRef`와 같은 **React에서 기본적으로 제공하는 hooks** 입니다.

다만 **`useEffect`**&#xC758; 경우 하단에서 작성하는데,  `Side Effect` 탭에서 사유를 좀 더 상세하게 서술하겠습니다.
{% endtab %}

{% tab title="Custom Hooks" %}
**설치한 Library의 hooks와 직접 구현한 Custom Hooks**입니다.

**`state`**&#xC640; 같이 **필요한 부분을 Props로 전달하여 사용하는 경우도 많기** 때문에 일반적으로 React Hooks 아래에 작성됩니다.
{% endtab %}

{% tab title="Variables" %}
상수가 아닌 **특정 상태(state)에 따라 변하는 변수**들이 일반적으로, `state` 아래에 선언하여 사용합니다.

또한 **여러 상태를 지켜보거나 계산이 무거운 값 들은 `useMemo` 로 최적화**를 고려해보세요.
{% endtab %}

{% tab title="Functions" %}
함수 또한 파라미터로 전달받기도 하지만 **state와 변수를 그대로 참조하여 쓰는 경우**도 있기 때문에 state와 변수 아래 선언합니다.

필요에 따라 유틸성 / 순수함수들은 **컴포넌트 외부로 분리하는 것도 고려**해보세요.
{% endtab %}

{% tab title="Side Effects" %}
**`useEffect`**&#xB85C; 관리되는 **Side Effect**는 **Component return 바로 위에 작성**합니다.

**특정 상태나 함수에 의존하여 실행되어야 하는 로직들**이 대부분이기 때문에 상태나 함수의 하단에 작성되어야 합니다.

**의존성(dependency)** 때문에 생기는 문제가 잦기 때문에 **의존성 별로 `useEffect` 분리를 고려**해보세요.

이렇게 분리된 **여러개의 `useEffect` 가 작성 되었을 때** `Custom Hooks`로 관리하지 않는다면 추후 **코드 수정 시 의존성 만으로 로직 파악이 어려울 수 있습니다.**

따라서 **주석으로 간단한 추상화를 권장**합니다.
{% endtab %}
{% endtabs %}

###