폴더

• 폴더 안에 index.js 가 없으면 소문자

  components
   ㄴ **mainpage**
  		ㄴStatusModal.tsx
  		ㄴCharacter.tsx
  

파일

• Page Component 파일

  • pages 폴더에 포함된 라우팅 페이지 컴포넌트 이름은 ___Page.js 로 작성

    MainPage.tsx
    SearchPage.tsx
    

• Component 파일

  • **파스칼 케이스 (PascalCase)**로 작성

    Header.tsx
    PopUpNews.tsx
    

• Component 이외의 파일

  • 카멜 케이스(camelCase)

    fetchApi.tsx
    auth.tsx
    

• 스타일시트 파일(CSS)

  • 적용할 파일명과 동일하게 작성

    Header.tsx
    Header.tsx
    

변수

<aside> ❗ 변수명 축약하기 보다는 직관적으로 짓기 ex) button ⭕ btn ❌

</aside>

• 변수

  • camelCase와 영어 대소문자, 숫자를 사용

    const isLog = false;
    const list2
    

  • 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙이기

    const isLogined = false;
    const isOpen =true;
    

• Constants (상수)

  • 대문자 로만 작성하고 여러 개의 단어를 합성한 경우 _ (under_score) 를 이용하여 단어 사이를 구분함

    const API_URL
    const BASE_URL
    

함수

• Event handler

  • handle + Event

  • camelCase

  • 만약 사용 되는 이벤트 함수가 여러개 있을 경우 어떤 기능을 가지고 있는지 유추할 수 있는 단어를 함께 작성

    <button onClick={handleClick}>리셋 버튼</button>
    <button onClick={handleSubmitClick}>제출 버튼</button>