[React] props가 무엇일까?

1. props의 정의

props는 properties를 줄인 표현이다. 컴포넌트 속성을 설정할 때 사용하는 요소라고 할 수 있다.
props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

2. JSX 내부에서 props를 랜더링해보자.

props값은 함수의 파라미터로 받아 와서 사용할 수 있는데, 컴포넌트에서 props를 랜더링할 수 있도록 만들어보자.

const MyComponent = props => {
  return <div> 안녕하세요, 제 이름은 {props.name} 입니다. </div>;
};

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

아예 props값을 지정해주자. App.js 들어가서~

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name = "React" />;
};

export default App;

아예 MyComponent에 넘겨주는 값을 React라고 지정해버렸네~

만약, props값을 따로 지정하지 않을 때 보여줄 기본값은 어떻게 세팅하지요?

const MyComponent = props => {
  return <div> 안녕하세요, 제 이름은 {props.name} 입니다. </div>;
};
MyCompnent.defaultProps = {
  name : '기본 이름'
};

위의 명령어를 입력하여서 기본적인 props값을 세팅해두어도 된다.

4. 태그 사이의 내용을 보여주는 children

가끔 태그 사이의 내용을 보여주고 싶을 수도 있으니까,..

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent>리액트<MyComponent/>;
};

export default App;

이제 여기서, 태그 사이에 있는 내용을 보여주고 싶을때 아래 코드를 추가하면 된다.

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

이 코드를 수행하면, 태그 사이에 있는 chilren 값이 반환된다.

5. ES6의 비구조화 할당 문법으로 props 쉽게 관리하기

props값을 사용할 때마다 props.* 형식으로 사용해야 해서 상당히 불편하다. 이를 개선해보자.

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

이렇게 코드를 작성하면 훨씬 간결하게 표현이 가능하다. 만약, 함수의 파라미터가 객체라면, 이 구조를 비구조화하여 사용하는 문법이다.

다시 작성하여서 아래와 같이 작성해도 된다.

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

6. propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나, 이에 대한 타입을 지정할 때에는 propsType을 사용합니다.
이것을 사용하기 위하여 상단에 import 시켜야 합니다.

import PropTypes from 'prop-types';

이것을 불러오고 코드를 다시 작성해보자.

import PropTypes from 'prop-types
const MyComponent = ({name, chlidren}) => {
  return (
    <div> 
    	안녕하세요, 제 이름은 {name} 입니다. <br />
    	children의 값은 {children} 입니다.
    </div>; 
};

MyComponent.propTypes = {
  name : PropTypes.string
};

이렇게 설정해 주면, name의 값은 무조건 string 형태로 전달해야 한다는 것을 의미합니다.
잘못된 형식(type)으로 전달할 경우에는 경고 메세지를 출력하여 propTypes가 잘못되었다는 것을 안내합니다.

isRequired를 사용하여 필수 PropTypes 설정

propTypes를 지정하지 않았을 때, 경고 메세지를 띄워줄 수 있다.
favoriteNumber라는 숫자를 필수 props로 만들어봅시다.

import PropTypes from 'prop-types
const MyComponent = ({name, favoriteNumber, chlidren}) => {
  return (
    <div> 
    	안녕하세요, 제 이름은 {name} 입니다. <br />
    	children의 값은 {children} 입니다. <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
    </div>; 
};

MyComponent.propTypes = {
  name : PropTypes.string,
  favoriteNumber : PropTypes.number.isRequired
};

favoriteNumber을 설정하지 않으면 경고가 나타납니다. 제대로 전달하란 말이얏!

PropTypes 종류

• array : 배열
• bool : 참과 거짓
• arrayOf : 특정 PropType으로 이루어진 배열을 의미합니다. arrayOf(PropTypes.number)는 숫자로 이루어진 배열을 의미!
• func : 함수
• number : 숫자
• object : 객체
• string : 문자열
• object : 객체
• node : 랜더링이 가능한 모든 것
• instanceOf(클래스) : 특정 클래스의 인스턴스
  ..등등 더 많은 내용은 아래 링크로 확인하자

https://github.com/facebook/prop-types

7. 클래스형 컴포넌트에서 state 사용하기

render 함수 안에서 비구조화 할당을 사용하면 된다.

class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
    return (...);
  }
}

클래스형 컴포넌트에서는 defaultProps와 propTypes를 class형 컴포넌트 안에서 설정할 수 있습니다.