실전 리액트 프로그래밍 인강을 보고 공부하면서 자주 볼 것 같아서 정리합니다.

컴포넌트 작성 순서

MyComponent.propTypes = {
  //...
}
  
export default function MyComponent({ prop1, prop2 }) {
  //...
}

const COL = [
  { id: 1, name: "chanho", width: 200, color: "white"},
  { id: 2, name: "Yoon", width: 250, color: "green"},
  // ...
]

const GET_PRODUCT_LIST = "/api/products";

function getTotalPrice({ price, total }) {
  // ...
}

1. 속성값 타입 정보(propTypes)

컴포넌트를 사용하는 입장에서 컴포넌트를 직접 작성한 사람, 컴포넌트를 처음본 사람 등 컴포넌트를 사용하려면 속성값을 입력을 해야하는데 올바른 값을 입력하려면 타입을 올바르게 입력해야하기 떄문이다.
그리고 또한 3자가 아닌 자신이 직접 작성했더라도 이후에 봤을 때도 조금 더 알기 쉽기 때문
Typescript를 사용해도 마찬가지

2. 컴포넌트 함수

컴포넌트 함수를 작성할 때 이름을 정해주는 것이 좋은데 가장 큰 이유로는 디버깅 하기가 힘들다.
그리고 컴포넌트의 매개 변수는 명명된 매개변수 문법으로 작성해주는게 좋다.

export default function MyComponent(props) {
 	props.prop1
  	props.prop2
}
// 명명된 매개변수 문법
export default function MyComponent({prop1, prop2}) {
 	 
}

3. 컴포넌트 함수 밖에 존재하는 변수와 함수

컴포넌트 밖에 있는 변수와 함수는 파일의 가장 밑에 정의하는 것이 좋다.
그리고 대문자로 작성해주는게 컴포넌트 안에서 다른 코드와 섞여서 존재할 때 컴포넌트 안의 변수인지 밖의 변수인지 알아보기 쉽기 때문에 가독성 향상에도 좋다.

컴포넌트 내부

연관된 것들로 그룹화

예를 들어 Hook의 종류별로, state 별로 그룹화해서 사용했다면 가독성 측면에서
하나의 기능에 연관되는 state와 바로 밑에 Hook을 선언해서 사용하는게 더 좋습니다.

function MyComponent({userId}) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    getUserApi(userId).then(res => setUser(res.data));
  }, [userId]);
  
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addeventListener('resize', onResize);
    return () => {
      window.removeEventListener('reszie',onResize);
    };
  }, []);
}

✨ 컴포넌트 내부의 코드가 너무 복잡해진다 싶으면 커스텀 Hook으로 분리하는게 가독성을 높이는데 좋다!!

---

출처
실전 리액트 프로그래밍