리액트 컨벤션 정리

1. NAMING CONVENTIONS

1. components 이름은 **Pascal case**로 작성해라.

   pascal case : 첫 단어를 대문자로 시작하는 표기법

   Header.js Footer.jsx MainBanner.js BlogList.jsx

2. Non-components 이름은 **Camel case**로 작성해라.

   Camel case : 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식

   myUtilityFile.js cookieHelper.js fetchApi.js

3. Unit test 파일명은 대상 파일명과 동일하게 작성해라.

   MainBanner.js MainBanner.test.js BlogList.js BlogList.test.js

4. 속성명은 **Camel case**로 작성해라.

   `className <div className=""></div>

   onClick, onSubmit <div onClick="{}" onSubmit="{}"></div>`

5. inline 스타일은 **Camel case**로 작성해라.

   <div style={{ fontSize: "1rem", fontWeight: "700" }}></div>

2. BUG AVOIDANCE

1. null 또는 **undefined**일 수 있는 값은 optional chaining 연산자 (?.)를 사용한다.

   obj?.prop obj?.[expr] arr?.[index] func?.(args)

2. 전달된 매개변수가 유효한지 확인하기 위해 guard pattern/prop types/typescript를 사용한다.

3. side-effects를 피하기 위해 외부 데이터를 props로 받아서 사용한다.

4. console.log()를 모두 지운다.

5. props는 읽기 전용으로 사용하며, 직접 수정하지 않는다.

3. ARCHITECTURE & CLEAN CODE

1. 유틸리티 파일을 만들어 중복된 코드를 피한다.
2. Presentational 컴포넌트와 Container 컴포넌트를 분리하여 사용한다. Container 컴포넌트와 Presentational 컴포넌트
3. 고차 컴포넌트(Higher Order Components, HOC)는 적절하게 사용한다.
4. JS, test, css로 파일을 분리한다.
5. 반복되어 import되는 이름을 줄이기 위해 각 폴더에 index.js 파일을 만든다.