React - [naming]

react에서 여러파일을 만들면 반드시 네이밍을 하게 된다.

네이밍에 따라서 여러파일들의 용도와 쓰임 그리고 속성까지도 

추측이 가능하고 헷갈리지 않기 때문에 네이밍은 매우 중요하다.

 

React 기준이므로 참고만한다.

- 보통 디렉토리 파일명은 소문자로 한다.

- CamelCase로 작명한다.

- 디렉토리자체가 react 컴포넌트가 바로들어 있는 폴더라면 폴더이름을 대문자로 시작할 것,

- 직접적으로 바로 react컴포넌트가 들어있지 않은 간접적인 관계의 폴더라면 소문자 단수로 표기

- loginSection2 같은 불분명한 의미는 짓지 않는다. 명확한 이름으로 표시를 한다. 어쩔수 없이 길어져도 괜찮다.

components

- 재사용 가능한 컴포넌트

- 다양한 곳에 사용가능한 범용가능한 컴포넌트

 

components/atoms

- 더이상 쪼갤수 없는 가장 작은 단위의 컴포넌트

 

domains

- 주제별로 구분할 수 있는 컴포넌트

domains/accounts/login

domains/accounts/signup 등

 

containers

- 재사용이 불가능 한 컴포넌트

(홈페이지, 약관등의 페이지)

 

className

- 클래스 이름을 지을 때에도

 

종류 - 역할 - 컴포넌트

 

순으로 작성해야한다.

예) loginSubmitButton

 

 

---

컴포넌트 안의 속성을 넣을 때도 가독성을 위해서 value값을 가지는 속성을 먼저 쓴다.

 

<TextField 
                        className={classes.loginInput} 
                        ref={emailValue} 
                        label='Email' 
                        variant='outlined' type='email' 
                        autoComplete='email'/>

이러한 형태로서 label 등 속성값은 나중에 적는다.

 

---

git version 관련 타이밍도 중요하다.

- 기능별로 개발을 완료했을 때마다 commit을 해주고

- 종류별로 만들 부분이 있을 때마다 branch를 나눠서 개발하자 : 나중에 merge해서 한번에 너무 많은 기능을 가진채로 개발하는 것을 막는다.