{ props defaultProps children } Component-2

이번엔 props에 대해 알아보자. props는 컴포넌트에 데이터를 넘겨줄 수 있다. 코드로 바로 알아보자.

App.js

일단 이렇게 생긴 컴포넌트가 있다. 컴포넌트를 잘 모른다면 https://mhypro.tistory.com/53

Component 컴포넌트-1

이걸 추천한다. 

 

App.js

<Component> 태그안에 변수하나를 만든다고 생각하면된다. 변수명=데이터 이렇게 보내주면 된다. 

 

그리고 컴포넌트함수에서 props로 받는다. 이름은 props가 아닌 다른이름으로 작명할 수 있는데 props로 사용하는게 대중적이다. 

그리고 아까 보냈던 coment를 props.coment형식으로 사용할 수 있다. 문자열만이 아닌 다른자료형들도 전달할 수 있다.

 

defaultProps  -  기본프로퍼티 

defaultProps는 컴포넌트에 넘겨주는 데이터가 없을 경우 기본Props를 지정해줄 수 있다. 

이렇게 사용할 수 있다.

뭐 간단하다. 유용하게 쓸 수 있을 것이다.

 

children  -  하위컴포넌트

컴포넌트안에 컴포넌트가 있다면 상위컴포넌트에서 하위컴포넌트를 가져다가 상위컴포넌트에 배치해 줄 수있다. 

이렇게 상위컴포넌트 안에있는 하위컴포넌트를 {children}을 사용해서 꼽을 수 있다. {children}이 없으면 하위컴포넌트는 보이지 않는다.