4장. React Props 사용

📌 Props란?

• 컴포넌트 끼리 값을 전달하는 수단
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다.
  (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함)
• 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능

💡 defaultProps

• 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정

• 설정 방법-1 (최신 방식)

  render() 윗 부분에 작성

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

• 설정 방법-2

  class 밑(밖)에서 설정

class명.defaultProps = {
  name: 'OnceDeveloper'
};

📝 실습 코드

• App.js

import React, { Component, Fragment } from 'react';
import MyName from './MyName';
//
class App extends Component {
  render() {
    return <MyName name="리액트" />;
  }
}
//
export default App;

• Class형 컴포넌트 이용한 MyName.js

import React, { Component } from 'react';
//
class MyName extends Component {
 //defaultProps 첫번째 방법 (최신 방식)
 static defaultProps = {
    name: '기본이름'
  };
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}
//defaultProps 두번째 방법
MyName.defaultProps = {
  name: 'OnceDeveloper'
};
//
export default MyName;

• 함수형 컴포넌트 이용한 MyName.js

  기능 없이 받아서 보여주기만 하는 경우 주로 이용
코드의 상단에 { Component } 를 import하지 않아도 됨.

import React from 'react';
//
const MyName = ({name}) => {
  return (
    <div>
      안녕하세요 ! 제 이름은 {name} 입니다.
    </div>
  )
};
//
MyName.defaultProps = {
  name : 'OnceDeveloper'
}
//
export default MyName;

• 결과 Page 1 : App.js에서 props를 호출

  

• 결과 Page 2 : defaultProps 적용

  

유튜버 출처 : Minjun Kim