[번역] React Coding Standards And Practices To Level Up Your Code
리액트 코딩 컨벤션
진또배기 소프트웨어 회사의 증거는 일관성 있는 코딩 스타일입니다. 팀 전체가 같은 방식으로 코드를 검토하고 있나요? 이 코드 리뷰 체크리스트는 완벽하지 않지만, 관심을 가질 만한 것의 90%를 다룰 것입니다. 팀의 코딩 표준을 높이려면 PR을 승인하기 전에 이 목록을 통과해야 합니다. 👍 ✓ 👌
Naming Conventions
- Component 파일명은
pascal case쓰세요.
Header.js
HeroBanner.js
CookieBanner.js
BlogListing.js- Non-component 파일명은
camel case쓰세요.
myUtilityFile.js
cookieHelper.js
fetchApi.js- Unit test 파일명은 테스트 대상 파일명과 일치시키세요.
CookieBanner.js
CookieBanner.test.js
fetchData.js
fetchData.test.js- 속성명은
camel case쓰세요.
className
onClick- 변수명은
camel case. 숫자나 특수문자를 쓸 수 있어요.
const variable = 'test';
let variableBoolean = true;- CSS 파일명은 컴포넌트 이름과 동일하게하세요.
CookieBanner.css
Header.css컴포넌트가 여러 파일(css, test)을 필요한 경우, 하나의 폴더 안에 위치시키세요.
리액트 컴포넌트를 사용하는 경우 확장자를
jsx로 하세요.
Bug Avoidance
- null일 수 있는 것들은
optional chaining을 사용하세요. - 전달한 파라미터의 유효성을 확실하게 하기 위해서 guard pattern/prop types/typescript을 사용하세요.
- side-effet를 피하기 위해서 함수 생성시 다음 규칙을 지켜주세요.
- 어떤 함수에서 외부의 데이터를 직접적으로 사용하지 않고 파라미터로 받아서 사용하세요.
- input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체는 외부의 영향을 받지 않아요. 따라서 Side-Effect를 방지할 수 있어요.
- 배포시
console.log()를 지우세요. - props를 직접 수정하지 마세요.
Architecture & Clean Code
유틸리티 파일을 만들어서 중복을 피하세요.
상태 관리하는 Component와 UI 보여주는 Component를 분리하세요. component/presentation pattern를 따르세요.
exporting 하기 위해서 각 폴더에
index.js파일을 만드세요. 반복되는 import 구문을 줄여줍니다.import {Nav} from './Nav.js'; import {CookieBanner} from './CookieBanner.js'; export {Nav, CookieBanner}하나의 파일에 하나의
React component만 만드세요.가능하면 컴포넌트 안에서 함수를 생성하지 마세요.
부모 컴포넌트가 아닌 다른 컴포넌트의 함수를 사용하지 마세요.(의존성 역전 피하세요.)
불필요한 주석을 사용하지 마세요.
한 화면에 보이지 않은 함수는 더 작은 단위로 분리해주세요.
주석 처리된 코드는 커밋하지 말고 삭제해주세요.
ES6
- 스프레드 연산자를 사용할 수 있나요?
- 구조 분해 할당을 사용할 수 있나요?.
let과const만 사용할 수 있나요?.- 가능하면 화살표 함수를 사용할 수 있나요?.
- 직접 null 체크를 하기보다 optional chain을 사용할 수 있나요?.
- 직접 null 비교를 하지 않고 null 값으로 비교할 수 있나요?
let value = 0 if(value) {} let value = undefined if(value) {} let value = null if(value) {}
Testing
- 테스트를 작성하세요.
- 적정 수준의 테스트 커버리지를 유지하세요.
- 하나의 테스트에서 하나의 기능만 테스트하세요.
- 테스트에서 별도의 로직을 만들어서 사용하지마세요.
- 테스트 클래스는 하나의 클래스만 테스트하세요.
- 네트워크, 데이터 베이스와 직접 통신하지 말고 가짜 함수를 사용하세요.
CSS
- 인라인 CSS 를 피하세요.
- 명명 규칙을 지키세요.(BEM, SUIT, etc..)
이것으로 제가 추천하는 ReactJs 코드 리뷰 체크리스트를 마칩니다. 행복한 코딩 🤘
댓글