props

1. props 기본값 설정

 

App.js

import React, { Component } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

App은 부모 컴포넌트, <MyComponent>는 자식 컴포넌트라고 한다.

App이 갖고 있는 state 데이터를 자식 컴포넌트에게 props를 이용해 전송해줄 수 있다.

그래야만 자식 컴포넌트가 부모 컴포넌트가 가진 state를 쓸 수 있다.

 

props를 쓰는 방법은 아래와 같다.

 

1. 부모 안에 있는 자식 컴포넌트 태그에 속성을 만들어준다.

 <자식컴포넌트 작명={전송할 state} /> 

 

2. 

바깥에 있는 자식컴포넌트에 props 파라미터 사용

function 자식컴포넌트(props) {
  return (
    <div>
      <h2>{props.작명[0]}</h2>
    </div>
  );
}

 

 

MyComponent.js

import React from "react";

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

export default MyComponent;

 

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

 

props에 기본값 지정해주기

 

변수명.defaultProps = {

 속성: '디폴트값'

}

 

 

2. 태그 사이에 내용을 보여주는 children

App.js

import React, { Component } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

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

export default App;

 

MyComponent.js

import React from "react";

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

MyComponent.defaultProps = {
  name: "사용자 이름",
};

export default MyComponent;

//안녕하세요, 제 이름은 사용자 이름입니다.
//children값은 리액트입니다

 

 

3. 비구조화 할당 문법 (구조 분해 문법)

ES6에서 제공해주는 비구조화 할당 문법

props. 를 앞에 계속 붙혀주는 것이 아닌 객체에서 값을 추출하는 문법을 사용하자.

 

props를 하나의 객체로 묶은 모습

const { name, children } = props;

 

import React from "react";

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

MyComponent.defaultProps = {
  name: "사용자 이름",
};

export default MyComponent;

 

함수의 파라미터 부분에도 사용할 수 있다.

 

import React from "react";

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

MyComponent.defaultProps = {
  name: "사용자 이름",
};

export default MyComponent;

 

조금만 생각해보면 MyComponent=( ) 의 파라미터 자리에는 원래 props 가 담겨있었던 부분이고, 이것은 곧 const { name, children } = props; 으로 관리할 수 있으므로 ( ) 안에 담아 사용할 수 있다는 것을 알 수 있다.

 

 

4. propTypes를 통한 props 검증

 

대소문자 구별이 잘 되어야 한다.

ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React

 

 

MyComponent.js

import React from "react";
import PropTypes from "prop-types";

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

MyComponent.defaultProps = {
  name: "사용자 이름",
};

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

export default MyComponent;

App.js

import React, { Component } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

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

export default App;

 

props가 string이어야 하는데 number을 주고 있어서 에러가 뜨고 있다.

 

꼭 들어가야만 하는 props

import React from "react";
import PropTypes from "prop-types";

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

MyComponent.defaultProps = {
  name: "사용자 이름",
};

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

export default MyComponent;

isRequired를 넣어준다.

 

favoriteNumber의 propType에 제대로 숫자를 지정해주면 에러가 없어진다

import React, { Component } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <MyComponent name="react" favoriteNumber={7}>
      리액트
    </MyComponent>
  );
};

export default App;