#17. props 사용하기
props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다.
this.props. 뒤에 상위 컴포넌트(App.js)에서 전달받은 props 변수명을 붙이면, 해당 데이터를 사용할 수 있다.
데이터를 수정해야 할 경우, props 자체가 아닌 컴포넌트 내부 변수(props_value)에 옮겨 가공한다.
#18. props 자료형 선언하기
자식 컴포넌트에서 props에 대한 자료형을 미리 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교하여, 일치하지 않는다면 경고 메시지로 알려준다. props의 자료형 선언을 위해 리액트 기본 내장 패키지인 prop-types를 import하여 사용한다.#19. props Boolean으로 사용하기
props 값을 Boolean형으로 하위 컴포넌트에 전달할 경우, true나 false 중 하나를 할당한다. 추가 문법으로 props 변수를 선언한 후 값을 할당하지 않고 넘기면 true가 기본값으로 할당된다.#20. props 객체형으로 사용하기
props 값을 객체로 하위 컴포넌트에 전달할 경우, 자료형을 object로 선언한다.하지만 하위 컴포넌트에서 객체 형태(객체 내부 변수들)의 자료형을 선언할 대는 shape이라는 유형을 사용한다.#21. props를 필수 값으로 사용하기
props의 자료형을 선얼할 때 prop-types를 사용했다. 자료형 설정 대신 isRequired를 조건으로 추가하면, 변수값이 없는 경우 경고 메시지를 발생시킨다.#22. props를 기본값으로 정의하기
props의 기본값은 부모 컴포넌트에서 값이 넘어 오지 않았을 때 사용한다. defaultProps라는 문법을 사용한다. 상위 컴포넌트에서 값이 전달될 것이라 기대되는 변수에 기본값을 할당한 후, 값이 넘어올 경우 그 값을 사용하고, 값이 넘어오지 않을 경우 지정한 기본값을 사용하게 된다.#23. props의 자식 Component에 node 전달하기
props를 하위 컴포넌트 태그 안쪽에 선언해 전달하는 것 이외에도 하위 컴포넌트 태그 사이에 작성된 node를 전달할 수 있다.⭐️ node란, html 문서를 구성하는 포괄적인 개념이다. 노드의 종류에는 문서 요소, 속성, 텍스트, 주석 등이 있다.
상위 컴포넌트에서 전달한 노드는 this.props.children이라는 문법으로 접근해 사용할 수 있다.
[출처 : 초보자를 위한 리액트 200제(정보문화사)]
안녕 :P