[React - 3] props

props (properties)

1. 컴포넌트의 속성(property)을 의미합니다.

props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 

웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다.

 

2. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.

React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.

 

3. 객체 형태입니다.

props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.

 

4. props는 읽기 전용입니다.

props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다. 

그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다.

 

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시

props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 의도하지 않은 side effect가 생기게 되고

단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.

---

How to use props?

props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.

 

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child attribute={"안녕하세요"} /> 
      <Child text={"I'm the eldest child"} />
    </div>
  );
};

// props 전달하기 방법 1 -> 객체 전달
function Child(props1, props2) {
  console.log(props1) // {attribute: "안녕하세요"}
  console.log(props2) // {text: "I'm the eldest child}
  return (
    <>
      <div className="child">{props1.attribute}</div>
      <div className="child">{props2.text}</div>
    </>
  );
};

// props 전달하기 방법 2 -> 구조분해 할당
function Child({props1, props2}) {
  console.log(props1) // "안녕하세요"
  console.log(props2) // "I'm the eldest child"
  return (
    <>
      <div className="child">{props1}</div>
      <div className="child">{props2}</div>
    </>
  );
};

---

defaultProps

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 

컴포넌트에 defaultProps 라는 값을 설정하면 됩니다.

 

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

한번 App 에서 name 이 없는 Hello 컴포넌트를 렌더링해보세요.

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </>
  );
}

export default App;