1. props?

• props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
• props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
• 자식컴포넌트가 부모컴포넌트 안에 있던 state를 가져다 쓰고 싶을 때 사용한다고 생각하자.
  예시) component글의 <App>과 <Header>의 경우
  

---

2. 컴포넌트를 사용할 때 props값 지정하기

// App.js
import React from 'react';
import OtherComponent from './Othercomponent.js';

function App(){
  return(
    <OtherComponent name="React" />
  )
}
export default App;

---

3. JSX 내부에서 props 렌더링

• props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다.
• JSX 내부에서 { } 기호로 감싸준다.

// OtherComponent.js
import React from 'react';

function OtherComponent(props){
  return(
    <div>
      안녕하세요. 제 이름은 {props.name}입니다.
    </div>
  )
}
export default OtherComponent;

---

4. defaultProps

• props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정한다.

// App.js
import React from 'react';
import OtherComponent from './OtherComponent.js';

function App(){
  return(
    <OtherComponent />
  )
}
export default App;

// OtherComponent.js
import React from 'react';

function OtherComponent(props){
  return(
    <div>
      안녕하세요. 제 이름은 {props.name}입니다.
    </div>
  )
};

OtherComponent.defaultProps = {
  name: '기본이름'
};

export default OtherComponent;

---

5.children

• 컴포넌트 태그 사이의 내용을 보여주는 props다.

// App.js
import React from 'react';
import OtherComponent from './OtherComponent.js';

function App(){
  return(
    <OtherComponent>리액트</OtherComponent>
  )
}
export default App;

// OtherComponent.js
import React from 'react';

function OtherComponent(props){
  return(
    <div>
      안녕하세요. 제 이름은 {props.name}입니다. <br />
      children의 값은 {props.children}입니다.
    </div>
  )
};

OtherComponent.defaultProps = {
  name: '기본이름'
};

export default OtherComponent;

---

6. props 내부 값 추출

• ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법
• 비구조화 할당(destructuring assignment) : 객체에서 값을 추출하는 문법, 구조 분해 문법이라고도 한다.
• 함수의 파라미터 부분에도 사용할 수 있다.

// OtherComponent.js
// 1) 객체에서 사용
import React from 'react';

function OtherComponent(props){
  const {name, children} = props;
  
  return(
    <div>
      안녕하세요. 제 이름은 {name}입니다. <br />
      children의 값은 {children}입니다.
    </div>
  );
};

OtherComponent.defaultProps = {
  name: '기본이름'
}

export default OtherComponent;

// 2) 함수의 파라미터에서 사용
// OtherComponent.js
// 1) 객체에서 사용
import React from 'react';

function OtherComponent({name, children}){
  return(
    <div>
      안녕하세요. 제 이름은 {name}입니다. <br />
      children의 값은 {children}입니다.
    </div>
  );
};

OtherComponent.defaultProps = {
  name: '기본이름'
}

export default OtherComponent;

---

7. propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다.
• propTypes를 사용하려면 코드 상단에 import를 불러와야 한다.
• 컴포넌트에서 설정한 props가 propTypes에서 지정한 형태와 일치하지 않으면 오류가 발생한다.

// OtherComponent.js
import React from 'react';
import PropTypes from 'prop-types';

function OtherComponent({name, children}){
  return(
    <div>
      안녕하세요. 제 이름은 {name}입니다. <br />
      children의 값은 {children}입니다.
    </div>
  );
};

OtherComponent.defaultProps = {
  name: '기본이름'
};

OtherComponent.propTypes = {
  name: PropTypes.string,
  children: PropTypes.string
};

export default OtherComponent;

① isRequired

• propTypes를 지정할 때 뒤에 isRequired를 붙여주면 필수 propTypes를 설정한다는 뜻이다.

// OtherComponent.js
import React from 'react';
import PropTypes from 'prop-types';

function OtherComponent({name, children}){
  return(
    <div>
      안녕하세요. 제 이름은 {name}입니다. <br />
      children의 값은 {children}입니다.
    </div>
  );
};

OtherComponent.defaultProps = {
  name: '기본이름'
};

OtherComponent.propTypes = {
  name: PropTypes.string.isRequired,
  children: PropTypes.strin.isRequired
};

export default OtherComponent;

② 많은 종류의 PropTypes

종류	의미
array	배열
arrayOf (다른 PropType)	특정 PropType으로 이루어진 배열
bool	true 혹은 false 값
func	함수
number	숫자
object	객체
string	문자열

---