[Frontend/React] 15. 컴포넌트 파일 작성법

속성값의 타입을 정의하기

아래와 같이 함수의 propTypes 라는 속성으로 객체를 입력해 줄 수 있습니다. 이 안에 속성값의 타입정보를 입력할 수 있습니다. 속성값 타입 정보를 가장 위에 작성하는 것을 추천합니다.

 

그 이유는 컴포넌트를 사용하는 사람은 이 컴포넌트를 사용할 때 속성값을 입력해야 하는데, 그 때 올바른 값을 입력하려면 타입 정보를 제대로 알아야 합니다. 그래서 컴포넌트 파일을 열었을 때 가장 상단에 있는 내용이 속성값에 대한 내용이면 좋습니다.

 

그리고 컴포넌트 작성자 입장에서도 컴포넌트 속성값의 타입은 중요한 정보입니다.

 

만약 타입스크립트를 사용한다면 propTypes 를 사용해서 타입을 정의할 필요는 없고 타입스크립트로 직접 타입을 정의하면 됩니다. 그 때도 마찬가지로 가장 위쪽에 타입스크립트로 속성값 타입을 정의하면 됩니다.

 

MyComponent.propTypes = {
  //...
}

 

---

컴포넌트 이름 작성하기

컴포넌트를 작성할 때에 이름을 꼭 작성해 주는 것이 좋습니다. 이름을 작성하지 않으면, 리액트 개발자 도구에서 디버깅을 하기가 힘듭니다. 리액트 개발자 도구에 컴포넌트의 이름이 노출되지 않고 Anonymous 로 표기되기 때문입니다.

 

export default function ({ prop1, prop2 }) {}

 

따라서 아래와 같이 꼭 이름을 넣어주는 것을 추천합니다.

 

export default function MyComponent({ prop1, prop2 }) {}

 

---

컴포넌트 매개변수 작성하기

컴포넌트 매개변수는 아래와 같이 통째로 명시하는 것은 좋지 않습니다.

 

export default function MyComponent(props) {}

 

prop1, prop2 와 같이 정확히 명명된 매개변수 문법으로 작성하는 게 좋습니다.

 

export default function MyComponent({ prop1, prop2 }) {}

 

---

컴포넌트 외부에 있는 변수와 함수 정의하기

컴포넌트 바깥에 있는 변수와 함수는 파일의 가장 밑에 정의하는 게 좋습니다. 중요도에서 속성값 타입과 컴포넌트 보다는 상대적으로 밀리기 때문입니다.

 

변수명은 대문자로 작성해주는 것이 좋습니다. 그래야 변하지 않는 변수라는 것을 나타낼 수 있기 때문입니다.

 

MyComponent.propTypes = {
  //...
}

export default function MyComponent({ prop1, prop2 }) {}

const DATA = [];
function setData(data) {
  DATA = data;
}

 

그리고 다소 커다란 크기의 객체를 사용할 때에는 외부에서 사용하는 것이 좋습니다. 그렇게 하지 않고 컴포넌트 내부에서 생성을 하게 되면, 컴포넌트가 렌더링 될 때마다 객체가 새로 생성이 되기 때문에 성능상 좋지 않습니다.

 

컴포넌트 내부에서 서로 연관된 코드는 아래와 같이 한곳으로 모아서 관리하는게 좋습니다. 그리고 이렇게 모아두면 이 코드를 별도로 커스텀 훅으로 관리하기도 좋습니다.

 

// v1에 관련된 코드
const [v1, setV1] = useState(0);
useEffect(() => console.log(v1))

// v2에 관련된 코드
const [v2, setV2] = useState(0);
useEffect(() => console.log(v2))

 

아래와 같이 커스텀 훅을 만들었다고 가정하고 코드를 개선해 볼 수 있습니다.

 

// v1에 관련된 코드
const v1 = useV1();

// v2에 관련된 코드
const v2 = useV2();

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런