[React] props

props

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

JSX 내부에서 props 렌더링 (MyComponent.js)

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

export default MyComponent;

부모 컴포넌트에서 사용하기 (App.js)

import MyComponent from "./MyComponent";

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

export default App;

안녕하세요, 제 이름은 React입니다.

props 기본값 설정 (defaultProps) (MyComponent.js)

MyComponent.defaultProps = {
  name: "기본 이름",
  age: "20살",
};

부모 컴포넌트에 name과 age 속성을 사용하지 않았을 때 위의 설정된 기본값으로 나타낸다.

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

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

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

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

• props.children은 리액트 냠냠이라는 문자열이 나타나게 된다.

비구조화 할당 문법을 통해 props 내부 값 추출하기 (MyComponent.js)

props 값을 조회할 때마다 props.name, props.children과 같이 키워드를 앞에 붙여줘야 한다.
이러한 작업을 편하게 하기 위해서 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출할 수 있다.

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

• 이렇게 코드를 작성하면 더 짧게 코드를 사용할 수 있다.

비구조화 할당 문법 (destructuring assignment)

• 객체에서 값을 추출하는 문법
• 구조 분해 문법이라고도 불린다.
• 함수의 파라미터 부분에서도 사용할 수 있다.

비구조화 할당 문법을 파라미터에 적용했을 때

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

propTypes를 통한 props 검증 (MyComponent.js)

• 필수 props를 지정하거나 props 타입을 지정할 때 사용한다.
• import를 통해서 propTypes를 불러오는 것이 선행되어야 한다.

import PropTypes from "prop-types";

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

name의 값은 무조건 문자열(string) 형태로 전달해야 된다.
자료형이 일치하지 않으면 개발자 도구의 Console에 경고를 표시한다.
만약 name에 3을 넣어도 페이지에 표시는 된다.

isRequired를 사용하여 필수 propTypes 설정 (MyComponent.js)

• propTypes를 지정하지 않았을 때 경고 메시지를 띄워준다.
• isRequired를 사용한 props은 무조건 값이 있어야 한다.

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

favoriteNumber의 자료형이 number가 아니면(undefined도 포함) Console에 경고를 표시한다.
defaultProps와 propTypes는 필수 사항은 아니다.

PropTypes에서 사용할 수 있는 자료형

• arrayOf() : 특정 PropType으로 이루어진 배열

• bool, array, function, number, object, string

• symbol: ES6의 Symbol

• node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드, children)

• instanceOf(클래스): 특정 클래스의 인스턴스

• oneOf(['dog', 'cat']): 주어진 array 요소 중 값 하나

• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나

• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType 객체

• any : 아무 종류

클래스형 컴포넌트에서 props 사용하기 (MyComponent.js)

import React, { Component } from "react";
import PropTypes from "prop-types";

class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
    // 비구조화 할당
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}입니다. <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = {
  name: "기본 이름",
};

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

export default MyComponent;

import MyComponent from "./MyComponent";

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

export default App;

안녕하세요, 제 이름은 기본 이름입니다.
children 값은 리액트 냠냠입니다.
제가 좋아하는 숫자는 3입니다.