클린코드 리액트 (props, component)

css-in-js는 성능에 민감하기 때문에 외부로 분리해주는게 중요하다. 

외부로 분리했을 경우 스타일 렌더링 될때마다 직렬화 되지 않는다, 또한 스타일 관련 코드를 분리해서 로직에 집중하고 jsx를 볼때 조금 더 간결하게 볼 수 있다. 

 

객체 Props 지양하기

두 객체 모두 그냥 눈으로 봤을때는 같지만 실행을 시켰을때는 false로 나오게된다.

 리액트는 다른점을 찾아내서 리렌더링을 시키는데 두개가 같지 않다고 나오면 불필요한 리렌더링이 일어나게 된다.

 

해결방법 

1. 변하지 않는 값이라면 외부로 드러내기

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

const [propArr, setPropArr] = useState(['hello''hello'])
return(
	<ChildComponent hello='world' hello2={propsArr.at(0)}/>
)

 

 

결국 props를 특정값이 아닌 객체자체를 무의미하게 내리게 되면 의도치 않은 불필요한 리렌더링이 일어나기 때문에 고정된 필요한 값이 필요하다면 구조분해 할당으로 나눠서 내려주는게 좋다. 

 

 

----

HTML Attribute 주의하기

커스텀 컴포넌트에 props로 넘기는것도 html attribute와 겹치지 않도록 주의해야한다. 

 

 

---

...props 주의할 점

이렇게 보내졌을때 코드가 복잡해질수록 어떤게 내려오는지 예측이 어려워진다. 

이렇게 구조분해할당으로 필요한 데이터만 넘겨질 수 있도록 하는게 좋다. 

 

---

많은 props 일단 분리하기

const App = ()=>{
  return(
    <JoinForm
      user={user}
      auth={auth}
      location={location}
      favorite={favorite}
      handleSubmit={handleSubmit}
      handleReset={handleReset}
      handleCancel={handleCancel}
    />
  )
}

이렇게 한번에 너무 많은 Props를 넘기는 경우 

1. one depth 분리를 한다.

2.  확장성을 위한 분리를 위해 도메인 로직을 다른 곳으로 분리한다.

 

 

 

---

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

이렇게 가지고 올 경우 불필요한 데이터도 포함되어 있을 수 있다. 

내가 꼭 필요한 데이터만 가지고 오는게 좋다. 이렇게 하면 memo최적화할때에도 좋고 혹시나 불필요한 데이터로인해 

불필요한 렌더링이 되는걸 막을 수 있다. 

 

---

components

 

컴포넌트란?

스스로 상태를 관리하는 캡슐화된 컴포넌트 

 

 

Fragment

이전에는 꼭 <div>등 감싸줬어야 했는데

<React.Fragment>
  <ChildA>
  <ChildB>
  <ChildC>
</React.Fragment>

위 코드처럼 React.Fragment를 사용하면 런타임으로 실행될떄는 

  <ChildA>
  <ChildB>
  <ChildC>

이렇게만 실행되게 된다. 

<></>

숏컷으로도 사용 가능하다

다만 위처럼 사용하게되면 

<div>
  {item.map(({id,term,description})=>(
    <>
    <div>{item.term}</div>
    <div>{item.description}</div>
    </>
  ))}
</div>

이런 경우 key값을 넣어줄 수 없는데 그럴 경우 

<div>
  {item.map(({id,term,description})=>(
    <React.Fragment key={id}>
    <div>{item.term}</div>
    <div>{item.description}</div>
    </React.Fragment>
  ))}
</div>

fragment를 사용해서 key를 넣어줄 수 있다.

 

 

Fragment 지양하기

불필요한곳에는 사용하지 않는게 좋다. 

컴포넌트의 댑스가 깊어질수록 보기가 힘들기 떄문에 필요가 없으면 하나라도 줄여주는게 좋다.

<div>{isLoggedIn ? 'User' : <></>}</div>
<div>{isLoggedIn ? 'User' : null}</div>

위처럼 <></>이건 null과 같다 그러므로 명시적으로 null을 사용하는게 좋다.

 또한 아예 div태그가 쓰이지 않아도 되는데 쓰일 수 도 있다보니 

{isLoggedIn ?<div> User</div> : <></>}

이렇게 써줄 수 있다.

 

 

 

알아주면 좋은 컴포넌트 네이밍

컴포넌트 네이밍은 pascalCase로 적어줘야 한다.

 

 

displayName

디스플레이 네임이 없을 경우 디버깅을할때 구분하기가 매우 어렵다.

만약 익명함수이거나 넣기 어려울 경우 아래처럼 사용해주면 된다. 

InputText.displayName = 'InputText'

 

 

컴포넌트 구성하기

1. 변하지 않는 상수는 외부로 빼자

const A = 100
const B = 500

2. interface 등 타입을 지정할땐 컴포넌트명과 일치하는걸로 타입명을 지정해주는게 좋다.

3. 컴포넌트 내부에서 플래그성 상태나 ref는 상단에 놓는다. 

4. 그 다음으로는 Hook을 넣는다.

5. 커스텀 Hook을 넣는다. 

6. useState와 같은 컴포넌트 내부상태를 넣어준다. 

7. 이벤트 함수를 넣는다.

8. 함수중에 date를 다루거나 localStorage를 다룰경우 컴포넌트 외부로 빼자 

9. useEffect는 최소 한개넣거나 아니면 하나도 없는게 제일 좋다 그리고 제일 하단에 적는다.