props (부모 컴포넌트에서 자식 컴포넌트로 데이터 전달)

자식 컴포넌트가 부모 컴포넌트로 부터 데이터를 받아와서 처리해야할 경우가 생긴다.
우선 부모 컴포넌트에서 자식 컴포넌트 쪽으로 데이터를 전달하기 위해 전달하려는 속성을 추가한다.

import React, { Component } from 'react';
import ChildComp from './childComponent';
class App extends Component {
  render() {
    return (
      <div>
        <ChildComp userName="insik" />
      </div>
    );
  }
}

export default App;

ChildComp 에 userName 의 값을 ‘insik’으로 전달했다.
이제 자식 컴포넌트인 childComponent.js 를 생성하여 아래 코드를 삽입한다.

import React, { Component } from 'react';

class Myname extends Component {
  static defaultProps = {
    userName: '홍길동'
  };
  render() {
    return (
      <div>
        <b>{this.props.userName}</b>
      </div>
    );
  }
}
export default Myname;

this.props.userName 을 통해 부모로 받은 값을 노출한다.
위 코드 중에는 defaultProps가 있다. 이 것은 부모 컴포넌트에서 props를 전달하지 않았을 때 기본 설정하는 값이다.

부모에서 <ChildComp userName=”” /> 이렇게 빈 값이 아니라 아예 속성을 없앤 <ChildComp /> 의 경우를 defaultProps에 지정된 기본 값이 있으면 그 값으로 노출한다는 것이다.

자식 컴포넌트가 클래스 컴포넌트가 아니라 함수형 컴포넌트의 경우는 아래처럼 처리한다.

import React from 'react';
const Myname = ({ userName }) => {
  return (
    <div>
      <b>{userName}</b>
    </div>
  );
};
Myname.defaultProps = {
  userName: '홍길동'
};
export default Myname;
TOP