1차 프로젝트 멘토 코드 리뷰
- 안쓰는 주석 지우기
- 변수명은 명사로, 함수명은 동사로 네이밍하기
- data같이 포괄적인 변수명은 지양하고, 구체화된 변수명을 지향하기
- 직관적으로 알 수 없는 값(다차원 배열값 등)은 변수화해서 사용하기
- 반복 코드는 map을 사용하기
- 랜더링 할 값이 없을 때는, 빈태그를 랜더링하지 않고 조건부 랜더링 하기
- 인라인 스타일(style={{attribute: value}}) 사용 지양하기
- map 사용 시 key값에 idx값 넣지 않기
(요소가 추가/삭제 시 뒤에 있는 모든 요소가 변경되므로) - img태그 사용 시 alt값 넣기
- 불필요한 div는 제거해서 depth 줄이기
참고 자료:
https://www.notion.so/wecode/1-26c835c8a01444d1a880f03890dd9cf8
2차 프로젝트 멘토 코드 리뷰
- 커밋 메세지 컨벤션 정하고 양식대로 커밋하기
- 중복된 값은 변수에 담아서 사용하기
(특히 date.getFullYear()과 같이 함수로 호출하는 값은 함수의 중복 실행을 줄이는 것이 좋다) - props도 조건에 따라 다르게 상속할 수 있다
<AlertModal messages={passId ? passIdMessage : failpassIdMessage}/>- 삼항연산자를 중첩해서 사용해야 하는 경우 if나 switch문을 활용한다
- 논리연산자를 중첩해서 사용할 수 있다
!checkPassAgainRegex && checkPass.legnth> 0 && <p>...</p> - 배열의 일부 요소에만 map을 사용하고 싶다면
map안에서 조건을 주기 보다 새로운 배열을 만드는 것이 좋다
(map안에서 조건을 주면 map은 불필요하게 모든 요소에서 실행되게 된다) - map의 elem에 의미있는 네이밍 하기
- className에 의미있는 네이밍 하기
- 일반적으로 boolean값을 관리하는 state의 네이밍은 is~형식을 가진다
- 불필요하게 전체 데이터를 가져오기보다, 필요한 데이터만 저장해서 사용하기
- 여러 컴포넌트에서 사용하는 데이터의 경우,
별도의 파일에서 data를 받은 뒤 expert해서 사용하기
(중복 코드 제거로 유지보수성을 높힌다)
참고 자료:
https://www.notion.so/wecode/2-6021003c775849ec9ff20b0e0fff5e92
리액트 클린코드
코드
1. 함수의 인자는 2개 이하가 이상적이다
2. 하나의 함수는 하나의 동작을 해야한다
3. 매개변수로 플래그가 필요한 경우 함수를 나누는 것이 좋다
4. 변수를 사용할 때, 비슷한 의미의 어휘는 통일해서 사용한다
(user, client, customer등 유사 어휘를 혼용해서 사용하지 않는다)
리액트
1. 단일 책임 원칙에 따라, 하나의 컴포넌트는 하나의 역할을 수행하는 것이 좋다
2. 정적 데이터를 관리할 때는 state를 사용하지 않는다
컴포넌트
- import 순서
1. node modules
2. utils 같은 함수
3. 멀리 있는 컴포넌트
4. 근처에 있는 컴포넌트
5. style 관련한 것들- propType 지정하기
- 컴포넌트 정의
(컴포넌트부터 정의해서 해당 컴포넌트의 역할을 한 번에 알아볼 수 있도록 해야한다) - styled component
(컴포넌트 다음에 정의한다) - 컴포넌트 내부의 state, props와 상관없는 함수는
불필요한 생성을 방지하기 위하여 밖으로 빼는 것이 좋다
조건부 랜더링
삼항 연산자는 중첩되면 코드를 파악하기 어렵기 때문에
&&로 대체할 수 없는지 고민해보는 것이 좋다
참고 자료:
https://www.notion.so/wecode/React-213f84972241445bba3f0eb416f9947b
리액트 최적화
-
React.pureComponent, React.memo
부모 컴포넌트가 리랜더되면 자식 컴포넌트도 리랜더된다
이 때, React.pureComponent(클래스형 컴포넌트),
React.memo(함수형 컴포넌트)를 사용하면
부모 컴포넌트가 리랜더되어도 자식 컴포넌트는 props가 변경 될 때만
리랜더되어 불필요한 리랜더링을 방지할 수 있다 -
Object/Array 상태값 변경
state가 Object나 Array일 때 state 값 자체를 변경하지 않는다
그 이유는, 리액트는 얕은 참조로 Object를 인식하기 때문에
기존의 Object에서 값만 수정했을 때는 값이 변경되었다고 인식하지 못한다
따라서 spread 연산자나 Object.assign을 사용해서 값이 변경된 새로운 Object를 만들어 주어야 한다 -
객체값 전달
객체를 props전달할 때는, 부모 컴포넌트에서 미리 값을 정의한 뒤 전달한다 -
useCallback
함수를 props로 전달할 때, 리랜더 시 함수도 계속해서 재생성되게 된다
이 때, useCallback을 사용해서 함수가 변경되지 않았을 때는 재생성을 방지할 수 있다
리액트를 사용할 때는, 불필요한 랜더링을 줄이기위해 고민해야 한다
참고 자료:
https://www.notion.so/wecode/React-ecfb08364a324cd0afcafd01467ea145
읽어볼 포스팅:
https://pks2974.medium.com/react-의-성능을-조금-이라도-올려보자-performance-optimize-f1a51b8c406c
https://velog.io/@edie_ko/lighthouse-performance
