이벤트 핸들러 네이밍 참고 사이트

react

1. component 폴더의 최상단 파일의 이름은 component 폴더 이름을 따라간다.

   • ex) components/Header/index.jsx

2. component의 스타일 파일명은 style.js로 통일한다.

   • ex) components/Header/style.js

3. 파일 확장자는 tsx로 한다.

4. tsx 사용하면 최상단에 React import 해온다.

5. 컴포넌트 함수는 arrow function으로 작성한다.

   const Button = ({type = "ghost", onClick, active}) => {
   	return <S.Button type={type} active={active} /> 
   };
   
   const Input = ({placeholder}) => {
   	return <input placeholder={placeholder} />
   }
   

6. props는 구조분해 할당으로 받아온다.

   const Button = ({type, onClick}) => {};
   

7. import 순서 (eslint로 설정 가능한듯)

   import React from 'react';
   import ... from 'react-router-dom';
   
   import ... from '@constants/';
   import ... from '@utils/';
   
   import ... from '@context';
   import ... from '@hook';
   
   import ... from '@page';
   import ... from '자식컴포넌트경로';
   import ... from 'styled-component경로';
   
   import ... from '나머지
   

8. 절대경로 설정

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@assets/*": ["src/assets/*"],
         "@components/*": ["src/components/*"],
         "@common/*": ["src/components/common/*"],
         "@utils/*": ["src/utils/*"],
         "@pages/*": ["src/pages/*"],
         "@styles/*": ["src/styles/*"]
       }
     }
   }
   

9. 요소들을 감싸는 컴포넌트는 <></>로 한다.

10. 이벤트 callback 함수 네이밍은 맨 뒤에 handler 붙인다.

    • ex) toggleButtonHandler , handle*, on*,

11. 상수 제외 변수명 카멜 케이스로 작성한다.

12. 상수 변수명은 스네이크 케이스로 작성한다.

13. Component의 prop default value는 구조 분해 할당에서 설정한다.

    const Component = ({ name = '훈딩', age = 10 }) => {};
    

14. 컴포넌트를 export하는 파일은 index.tsx로 설정한다.

    • ex) ./components/Header

15. constants 폴더 내에 index.ts파일이 내부 constants 설정한 파일들을 index.ts에서 합쳐준다.

    // constants/index.ts
    export {} from '@contants/api'
    

16. event handler

    참고 블로그

    1. 함수
       • handle* prefix를 붙인다. ex) handleClick
    2. Props
       • on* prefix를 붙인다. ex) onClick

styled-components