[React.js]props

Props의 개념에 대해 공부했다.

 

가장 상위 컴포넌트가 되는 App 컴포넌트 내에 자식 컴포넌트들이 존재하게 되는데,

 

만약 자식 컴포넌트가 같은 속성들을 가지고 단지 이름만 다르다거나.. 하는 경우라면

 

같은 코드를 중복 작성하여 컴포넌트를 만들기보다는 props를 활용해 하나의 컴포넌트에 다른 인자를 전달함으로서

 

컴포넌트를 구성해줄 수 있다.

 

props에는 값뿐만 아니라 함수도 전달이 가능하다.

Btn 컴포넌트 2개

Btn 컴포넌트 구성

위와 같이 text 라는 props를 받는 Btn 컴포넌트를 하나만 만들어주고

 

App 컴포넌트에서 Btn에 text라는 이름을 가진 props에 값을 담아 전달해준다.

결과화면

보기와 같이 같은 Btn 컴포넌트임에도 다른 결과가 도출된다.

 

ps. propTypes 를 통해 전달되는 props의 타입을 지정하고 잘못 전달되었을 시 에러를 띄울 수 있다.

또한 JS의 ES6 문법을 통해 인자가 전달되지 않을 경우 default 값도 설정이 가능하다.

 

propTypes