배경
- React의 기본 이론과 원리에 대한 이해를 통해, React 기반 웹 페이지와 기능 구현에는 어느정도 자신감이 생겼다.
- 단지,
'된다'의 수준을 넘어,'더 나은 컴포넌트(코드) 작성은 어떻게 할까?'라는 고민을 하게 되었다.- 이에 관한 몇 가지 서치를 했고, 이를 종합하여 나름 정리해보고자 한다.
React Component 작성법
출처 사이트
1: https://ko.reactjs.org/docs/faq-structure.html
2: https://www.codeinwp.com/blog/react-best-practices/
3: https://betterprogramming.pub/best-practices-i-wish-all-react-developers-knew-part-1-ff6cdee0666a
1. 너무 많은 중첩을 피하자 (from 1)
: 컴포넌트 임포트 시 상대경로가 복잡해지며, 해당 컴포넌트를 찾는데 어려움이 있으므로, 단일 프로젝트에서는 최대 3~4단계 이상으로 들어가지 않도록 설계
2. 컴포넌트가 수행하는 구체적인 기능 기준으로 작게 세분화하기 (from 2)
:데이터(state)가 업데이트 되면, 해당 데이터가 속해있는 컴포넌트 단위로 리랜더 되기 때문에, 이를 최소화하기 위해서는 세분화하는 것이 유리
(여기서 '데이터가 업데이트'란 의미는 결국 '기능'을 의미)
:구체적인 기능 별로 나눠져 있으면 디버깅이나 유지보수에도 유리
3. '재사용'이라는 관점에서 재사용 가능성이 있는 컴포넌트는 해당 단위로 구분하고 쉽게 import 할 수 있는 폴더내 위치(ex> 'components')
: 재사용성은 React와 같은 SPA에서 가장 핵심적인 장점이므로, 이를 극대화할 수 있는 전략이 필요
: 재사용을 통해 디버깅이나 유지보수가 쉬워지고, 코드가 간결해질 수 있음
4. 컴포넌트 이름 첫 글자는 대문자 & Pascal Case
: JSX가 일반 default HTML tag와 쉽게 구분할 수 있음
: Pascal Case는 첫 글자가 대문자로 시작하는 Camel Case
5. 하나의 stateful 컴포넌트에서 data를 로드하고 다른 stateless 컴포넌트에서 props로 전달받아 display하도록 설계
: 업데이트 되는 데이터 소스는 1개로 되어야, 여러번 업데이트 하지 않아도 됨
: 데이터 업데이트 시, re-render 측면에서 최소화 할 수 있도록 구현
6. 모든 코드에 대해 테스트를 할 것
: 새로운 코드가 기존 코드와 병합되어 졌을 때, 기능상 문제 없이 잘 돌아가는지 확인하기 위해 테스트가 필요
: _TEST_ 폴더를 해당 컴포넌트 폴더 내에 만들어서 관리
: 크로스 브라우징 테스팅 tools(https://www.codeinwp.com/blog/best-cross-browser-testing-tools/)
: 기능 테스트(https://jestjs.io/)
7. 상수 및 데이터(API, data, 이미지)들은 별도 파일로 분리
8. props를 넘길 때는 가능하면 object로 한번에 넘기기
// Don't pass primatives
<UserAccount
name={user.name}
email={user.email}
id={user.id}
/>
// Pass objects
<UserAccount user={user} />9. 하나의 컴포넌트 안에는 하나의 map을 포함하도록
: 가독성 향상을 위해 , 가급적 단순히 props 데이터를 받아 display기능만을 수행하는 map 함수 부분이면, 별도 컴포넌트로 분리 후 import
: 다만, 해당 컴포넌트의 주 역할이 map 내의 데이터를 보여주는데 있다면 동일 파일 내에 유지
// Don't write lops with the rest of the code
const Component = ({title, cards}) => {
return <div>
<h1>{title}</h1>
{
cards.map(({title: cardTitle, subtitle, image}) => ({
<div>
<h3>{cardTitle}</h3>
<h5>{subtitle}</h5>
<img src={image} />
</div>
}))
}
</div>
}
// Break it up into a separate list component
const Component = ({title, cards}) => {
return <div>
<h1>{title}</h1>
<CardsList cards={cards} />
</div>
}내 생각
상호 관련성이 깊거나, 함께 변경해야 하는 확률이 큰 파일이나 폴더는 최대한 인접하게 위치시키기
: 마치 UX를 설계하는 원리와 유사하게, 파일과 파일간의 이동 동선이 가장 짧고 직관적인 위치에 위치하도록 하는게 좋을 듯
