[React] css 모듈과 proptype

1. CSS 모듈

클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 방법이며, 유지보수가 편리해진다.

 

사용 방법

.css 확장자 앞에 .module 을 붙여준다.

.module.css 파일에 클래스명으로 된 속성을 만들어준다.

파일을 import 해주고, 프로퍼티를 호출하는 것처럼 클래스명을 불러와주면 된다. 여러 개의 속성을 가져오려면 백틱(``)을 사용해 감싸준다.

개발자 도구에서 클래스가 적용된 것을 보면 hash 값이 붙은 고유한 값이 부여된 것을 알 수 있다. 따라서 클래스명이 같더라도 덮어씌워지지 않는다.

 

2. proptype

React에 내장된 타입 검사 기능이다. 타입 선언의 장점은 타입 정보를 정의해 둠으로써 다른 사람이 코드를 봐도 컴포넌트 로직의 이해 없이 타입 정보를 한눈에 파악할 수 있다.

 

npm으로 설치할 수 있다.

PropTypes는 부모로부터 전달받은 prop 데이터의 type을 검사한다. 부모와 자식 간 데이터 타입이 일치하지 않으면 콘솔 창에 에러가 발생한다.

 

간단한 예시를 들고 시작하자면 아래와 같다. prop-types를 가져오고, text와 fontSize에 타입을 명시해주었다. text.string.isRequired 는 text에 string 타입만 들어가야 하며, 반드시 prop을 넣어줘야 함을 뜻한다. 즉 text에 number를 넣거나, Button 컴포넌트에 text를 사용하지 않는 경우는 모두 에러가 발생한다. fontSize의 경우는 number만 받을 수 있도록 했다.

string, number 같은 기본적으로 선택할 수 있는 데이터 타입은 다음과 같다.

  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol

만약, 복수의 데이터 타입 중 하나가 되도록 하려면 oneOfType([])을 사용한다.

 

이 외에도 하나의 자식만 요구, 초기 prop 값을 설정 등 다양한 기능을 제공하고 있지만, 현재 수준에서 다룰 수 없거나 빈도가 낮아 추후에 더 공부해보기로 한다.

 

 

출처
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95
https://www.daleseo.com/react-prop-types/