component 폴더의 최상단 파일의 이름은 component 폴더 이름을 따라간다.
components/Header/index.jsx
component의 스타일 파일명은 style.js
로 통일한다.
components/Header/style.js
파일 확장자는 tsx
로 한다.
tsx
사용하면 최상단에 React
import 해온다.
컴포넌트 함수는 arrow function으로 작성한다.
const Button = ({type = "ghost", onClick, active}) => {
return <S.Button type={type} active={active} />
};
const Input = ({placeholder}) => {
return <input placeholder={placeholder} />
}
props
는 구조분해 할당으로 받아온다.
const Button = ({type, onClick}) => {};
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 '나머지
절대경로 설정
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@common/*": ["src/components/common/*"],
"@utils/*": ["src/utils/*"],
"@pages/*": ["src/pages/*"],
"@styles/*": ["src/styles/*"]
}
}
}
요소들을 감싸는 컴포넌트는 <></>
로 한다.
이벤트 callback 함수 네이밍은 맨 뒤에 handler
붙인다.
toggleButtonHandler
, handle*, on*,상수 제외 변수명 카멜 케이스로 작성한다.
상수 변수명은 스네이크 케이스로 작성한다.
Component의 prop default value는 구조 분해 할당에서 설정한다.
const Component = ({ name = '훈딩', age = 10 }) => {};
컴포넌트를 export하는 파일은 index.tsx
로 설정한다.
./components/Header
constants 폴더 내에 index.ts파일이 내부 constants 설정한 파일들을 index.ts에서 합쳐준다.
// constants/index.ts
export {} from '@contants/api'
event handler
handle*
prefix를 붙인다. ex) handleClick
on*
prefix를 붙인다. ex) onClick