[유데미(udemy) - React CleanCode] Props

불필요한 Props 복사 및 연산 

1. props로 바로 사용하기 

2. 연산된 값을 props로 넘기기 

3. useMemo로 연산 최적화하기 (계산이 복잡하고 무거울 경우)

Curly Braces 

Curly Braces는 언제 사용할까?

- 문자열이 아닌 경우 

- 값이 계산되서 들어가는 경우 

- 객체 

 

 

-> 문자열은 Curly Braces에 넣지 않는 것이 좋음 

 

Shorthand Props 

function component ({hasPadding, ...props}) {
 <HeaderComponent hasPadding={hasPadding}>
   <ChildComponent {...props} />;
 </HeaderComponent>;
 }

 

 

Single Quotes vs Double Quotes 

1. HTML, JS를 구분해서 Single Quotes와 Double Quotes를 결정하자 (html에서는 double quotes가 생김) 

2. 규칙은 팀끼리 정해서 자동 포맷팅 시키자 

알아두면 좋은 Props 네이밍 

 

1. class는 className으로 사용하기 

2. camel case 사용하기 

3. 무조건 true라면 isShow={true}가 아닌 isShow로 축약하기 

4. 컴포넌트라면 대문자로 시작하기

인라인 스타일 주의하기  

JSX에서 인라인 스타일을 쓰려면 중괄호 안에 camelCase key를 가진 객체를 넣어야 한다. 

CSS in JS 인라인 스타일 지양하기 

CSS in JS 인라인 스타일 단점

- 스타일이 렌더링이 될 때마다 직렬화 된다. (성능 저하)

- 동적인 스타일 실수로 건드릴 수 있다. (휴먼 에러 발생 가능성)

- export할 수 없음 

 

객체 Props 지양하기 

- 변하기 않는 값일 경우 컴포넌트 외부로 드러내기 

- 필요한 값만 객체를 분해해서 props로 내려준다.

- 정말 값 비싼 연산, 너무 잦은 연산이 있을 경우 useMemo 활용하여 계산된 값 메모이제이션 

- 컴포넌트를 더 평탄하게 나누면 나눌 props 또한 평탄하게 나눠서 내릴 수 있다.

 

HTML Attribute 주의하기 

HTML, JS에서 정의한 예약어와 커스텀 컴포넌트 props가 혼용되지 않도록 하자

...props 주의할 점 

props에서 spread 연산자를 쓸 시 어떤 props가 들어있는지 예측하기 어렵기 때문에, 관련있는 props, 없는 props, 나머지 props로 나눠보자

많은 Props 일단 분리하기 

props가 많다면 컴포넌트를 먼저 분리해보자

 

객체보다는 단순한 Props의 장점 

props에 객체 전체를 내리지 말고 꼭 필요한 값만 내리자