prop-types

npm i prop-types

prop-types 를 설치해준다.

 - .js 파일에서 다양한 모듈을 불러와서 import하고 export 하는 것으로 컴포넌트를 생성, 적용 할 수 있다.

만일 같은 폴더 내부에 있는 파일이라면,

import Something from "./파일명"

 - 처럼 파일명 앞에 ./을 붙여준다

 

---

컴포넌트를 불러올 때 사용했던 props 의 타입을 지정할 때도 propTypes을 설치했기 때문에 매우 편리하다.

또한 특정 컴포넌트만을 위한 css 요소 파일도 만들 수 있다. (  CSS 모듈을 여러개 작성함 )

 

컴포넌트의 가장 큰 특징으로는, 각각의 컴포넌트를 생성하고 컴포넌트 만의 css를 생성해서 하나로 묶어서 생산하던 html, css, javascript를 분리해서 관리할 수 있다는 것이다.

 

만일, 버튼 요소를 생성하고 싶다면

 - 다음과 같이 버튼.js를 생성하고 버튼과 관련있는 모듈을 import 한다.

import 할 때 모듈 명은 자유롭게 정할 수 있고, 파일 위치는 동일한 폴더안에 있을 경우 ./위치 로 나타낸다.

사용하고 싶은 모듈의 기능을 styles.클래스명 으로 꺼내 쓸 수 있다.

 - 버튼 모듈에 대한 파일을 생성해서 ( 여기서는 css ) 사용하고자 하는 곳에 import해서 꺼내 쓸 수 있다.

 - 그리고 최종적으로 완성된 버튼 컴포넌트를 가져와서 사용할 수 있다.