<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> 이것이 완벽하다고 할 수는 없지만, 최선이라고 할 수 있을 것 같습니다.
</aside>
응 너 혼자 개발하는게 아니잖아 ㅎㅎ. 그렇다. 우리가 리액트나 기타 프레임워크, 라이브러리로 개발을 진행할 때는 정해진 규칙을 따르기 마련이다. 흔히 컨벤션이라고 하는 코드 작성 규칙 부터 팀, 조직 내부에서 정의한 컴포넌트 작성 규칙 등이 있을 것이다. 규칙을 잘 따르지 않거나 규칙 자체가 없다면 코드 가독성은 물론이고, 내가 퇴사 등을 하여 다른 사람이 내가 작성한 컴포넌트를 볼 때 쉽게 알아볼 수 없을 것이다.
그래서 원만한 개발 환경 구축을 위해서 우리는 리액트에서 컴포넌트를 작성할 때 지킬 수 있는 매끄러운 컴포넌트 작성 방법을 공부할 필요가 있다.
// User 컴포넌트를 만든다고 가정하고, 사용될 속성의 타입을 정의해본다.
import PropTypes from 'prop-types';
User.propsTypes = {
sex: PropTypes.bool.isRequired,
age: PropTypes.number,
hairColor: PropTypes.oneOf(['gold', 'red', 'black']),
onChangeName: PropTypes.func,
onChangeAge: PropTypes.func.isRequired
}
컴포넌트를 사용할 때, 속성에 대한 정확한 타입을 입력 해주어야 하기 때문에 가장 찾기 쉬운 파일의 상단에 마킹한다.
리액트의 정식 패키지 prop-types 패키지로 타입을 정의할 수 있다.
isRequired 속성이 있으면 필수값이라는 것을 의미한다. (자세한 내용은 아래의 npm에서 확인하자)// props type 지정 이후
...
export default function Component() {}
function Component({ props1, props2 }) {}