내맘대로 React CodeStyle

컴포넌트 만들기 전에

1. 외부 라이브러리의 컴포넌트는 Wrap 컴포넌트를 만든 다음에 사용

• 외부 라이브러리는 언제 사용을 중단할지 알 수 없어요. 관리 주체가 우리가 아니기 때문에 한계가 있기 때문이죠. 그러니 외부 라이브러리는 언제든 다른 라이브러리로 바꾸거나 자체 코드로 변경할 수 있도록 Wrap 컴포넌트를 만들어 사용해요.
• props 및 config를 프로젝트 전반에 동일하게 가져가려는 목적도 있어요.

 

컴포넌트 만들기

1. 파일과 디렉토리디렉터리 명은 케밥 표기법을 기본으로 사용하고, 리액트 컴포넌트 관련 디렉터리와 파일만 파스칼 표기법으로 사용

• 파일 내에서 컴포넌트 명이나 클래스의 이름을 표기할 때는 파스칼로 표기해요.
• 스토리북 내의 title은 파스칼케이스로 표기해요.

 

2. 함수 컴포넌트를 생성할 때 선언식을 사용

• default 함수 선언식을 사용해서, 가급적 1파일 1 컴포넌트를 목표해요.
  
  • 2개 이상의 컴포넌트를 1 파일 내에 작성하지 말아요.
  • 컴포넌트 파일 이름은 함수 컴포넌트의 이름과 동일하게 생성해요.
    • index.ts 에 함수 컴포넌트를 작성하는 건 하지 말아요.
    • index.ts 에서는 path 축약 목적의 import / export 조정만 해요.
• Default Parameters를 사용하고, defaultProps는 사용하지 않아요.

 

3. 사용자 이벤트가 발생하는 모든 Element는 id를 꼭 입력

추후 Analytics 등 트랙킹 툴에서 사용자 행동을 분석하는 토대가 돼요.

 

 

4. Props 명은 컴포넌트 관점에서 목적을 드러낼 수 있고 간결한 방향으로 고민

• index 보다는 activeIndex 라고 하는 것이 좀 더 목적을 드러낼 수 있어요.
• 컴포넌트 명칭이 props를 계속 따라다니지 않아도 돼요.

// good
export default function Tab (activeIndex: number, name: string) {
  return ...
}



// bad
export default function Tab (index: number, tabName: string) {
  return ...
}

 

5. 모든 설명은 소스 파일에 기재하고, 주석은 jsDoc 양식을 사용

jsDoc으로 기재하면 소스 코드를 작성할 때 툴팁으로 도움말이 뜨고, 자동완성 기능을 사용할 수 있어서 이점이 많아요.

스토리북과 같이 사용할 때는 스토리북이 jsDoc을 바탕으로 문서화를 해줘서 더욱 편해요.