210901 리액트 리팩토링

1. 클래스명으로 수정할 div가 아니면 react.fragment 를 사용하면 좋다

<div className="main">
  (여러 내용 ...)
</div>

<>
  (여러내용...)
</>

원래는 <Fragment> </Fragment> 이긴 하지만
<> </> 이렇게 생략해서 사용할 수도 있다

2. 컴포넌트를 분리하는 경우

1. 코드의 재사용성
2. 가독성 측면

3. css 스타일링 convention

CSS property 순서

1. Layout Properties
   (position, float, clear, display)

2. Box Model Properties
   (width, height, margin, padding)

3. Visual Properties
   (color, background, border, box-shadow)

4. Typography Properties
   (font-size, font-family, text-align, text-transform)

5. Misc Properties
   (cursor, overflow, z-index)

4. 불필요한 div태그로 감싸지 말것

문제의 코드

<div className="goodsImg">
  <img src="/images/1234.jpeg" alt="나와라" />
</div>
<div className="goodsName">
  <h2>하루님</h2>
</div>

수정이후

<img src="/images/1234.jpeg" alt="나와라" className="goodsImg" />
<h2 className="goodsName">하루님</h2>

5. 컴포넌트 폴더 구조

pages 폴더 > Main 컴포넌트 폴더 > GoodsList 컴포넌트 폴더 > NewList 컴포넌트 폴더로 구성했는데

하나의 페이지 하위에 존재하는 모든 컴포넌트들은 서로의 상하 관계를 따지지 않고 모두 동일한 관계에 두면 된다!

pages > Main > Main.js, Header, GoodsList, Goods
이런 방식으로!