[React] Props 사용법

Props 란?

부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용됨

---

Props 사용법

1. Props 구조 만들기

(1) App.js와 MyName.js 를 만듦

 

(2) MyName.js 내용

import React, { Component } from "react";

class MyName extends Component {
  static defaultProps = {
    name: "기본이름"
  };
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}
export default MyName;

(3) App.js 내용

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

2. Props 구조 설명하기

(1) 현재 js 파일에서 다른 js 파일에 있는 클래스 불러오는 방법

import MyName from "./MyName";

(2) 전체적인 흐름 (기본값 설정까지)

MyName.js에서 만든 MyName 함수에 Props를 이용하여 코드를 작성해준다

이 함수를 다른 js 함수에서 사용할 때에는 name를 이용하여 <b> 안의 내용을 지정해 줄 수 있다

render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }

MyName.js 에서 MyName 함수를 불러온 후에 App.js로 넘어간다

import MyName from "./MyName";

App.js 에서 name의 값을 지정하고 있는 모습이다

  render() {
    return <MyName name="리엑트" />;
  }

만약 이때 name 의 값을 지정해주지 않는다면 화면상에는 ' 안녕하세요! 제이름은 입니다' 라고 뜨게 된다

지정해주지 않아도 지정된 기본값이 보여지는 방법은 아래와 같다

(MyName.js에 작성한 모습이다)

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

(3) 또 다른 기본 값 설정 방법

import React, { Component } from "react";

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}
MyName.defaultProps = {
  name: "velopert"
};
export default MyName;

클래스 밖에 설정하는 방법도 있지만 (2) 의 기본 값 설정이 최신 js 문법이다

---

함수형 Component 만드는 방법

import React from "react";

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

- 단순히 Props만 받아와서 기능없이 보여주는 경우에 함수형 Compnent를 사용한다

- 함수형 component를 만들게 되면 첫줄에서 Component를 불러오지 않아도 된다

- ({name}) :  비구조화 할당 문법 (아래 링크 참고)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment