[React] 프로퍼티(props) 기본

개요

---

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.
JS의 DOM트리 방식으로도 값을 전달할 수 있다.
프로퍼티값은 수정할 수 없다.
코드를 보면서 사용 방법을 알아보도록 하겠다.

---

예제 코드

---

우선 임의의 컴포넌트 하나를 생성한다.
본 글에서는 MyComponent라는 임의의 컴포넌트를 생성했다.
아래 코드는 클래스형 컴포넌트의 예시이다.
클래스형 컴포넌트와 함수형 컴포넌트를 모두 한 번씩 생성해 보면서 프로퍼티를 전달받을 것이다.

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default MyComponent;

이렇게 컴포넌트를 만든 후, 상위 컴포넌트인 App.js에서 name값을 MyComponent에 넘겨줄 것이다.

import './App.css';
import MyComponent from './03/MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent name="minq"/>
    </div>
  );
}

export default App;

코드에서 App 컴포넌트는 MyComponent로 name을 전달한다.
MyComponent에서는 다음과 같이 프로퍼티를 전달받는다.
위 코드에서는 name="minq" 라는 프로퍼티를 MyComponent에 전달하고 있다.
이 때, 프로퍼티를 전달받는 방법이 클래스형 컴포넌트와 함수형 컴포넌트에 따라 차이가 있다.

---

클래스형 컴포넌트에서 프로퍼티 전달받기

---

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        const name = this.props.name;
        return (
            <div>
                <span>{name}</span>
            </div>
        );
    }
}

export default MyComponent;

클래스형 컴포넌트에서는 this()를 사용하여 프로퍼티를 참조한다.

---

함수형 컴포넌트에서 프로퍼티 전달받기

---

함수형 컴포넌트 예제코드

import React from 'react';

function MyComponent (props) {
    const name = props.name;
    return (
        <span>{name}</span>
    );
}

export default MyComponent;

---

화살표 함수형 컴포넌트 예제코드

import React from 'react';

const MyComponent = (props) => {
    const name = props.name;
    return (
        <div>
            <span>{name}</span>
        </div>
    );
};

export default MyComponent;

함수형 컴포넌트에서는 this를 사용할 수 없다.
때문에 props를 인수로 주어야 한다.

---

정리

---

프로퍼티는 상위 컴포넌트에서 하위 컴포넌트로 전달된다.
이를 '단방향으로 데이터가 흐른다'라고 표현한다.
상위 > 하위가 아닌 형제 컴포넌트끼리도 역시 프로퍼티를 전달할 수 없다.
클래스형 컴포넌트에서는 this를 사용하여 프로퍼티를 참조할 수 있다.
함수형 컴포넌트에서는 this를 사용할 수 없다. 때문에 props를 인수로 주어서 프로퍼티를 참조한다.