Props

: props는 성별이나 이름처럼 변하지 않는(immutable) 외부로부터 전달받은 값으로, 컴포넌트의 속성(property)을 의미한다.

예시) Welcome 컴포넌트를 여러 번 렌더링하는 App 컴포넌트
각각 <h1>Hello, Jieun!</h1> <h1>Hello, GG!</h1>, <h1>Hello, Bella!</h1>를 렌더링한다.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Jieun" />
      <Welcome name="GG" />
      <Welcome name="Bella" />
    </div>
  );
}

props 특징

• 상위 컴포넌트로부터 전달받은 값이다.
  React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 React 엘리먼트를 반환한다.
  (props는 함수형 컴포넌트와 클래스 컴포넌트에서 사용할 수 있다.)
• 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체 형태를 가진다.
• 변경될 수 없는 읽기 전용(read-only) 객체이다.
• props 속성의 이름을 원하는대로 지정해 줄 수 있다.

클래스 컴포넌트 vs 함수 컴포넌트

• 클래스 컴포넌트 : class 문법으로 만든 컴포넌트
• 함수 컴포넌트 : 함수 문법으로 만든 컴포넌트

Hook이 나오기 전까지 state는 클래스 컴포넌트에만 다룰 수 있었으나, React 16.8 버전에서 Hook이 추가되며 함수 컴포넌트도 state를 다룰 수 있게 되었다.

props 사용법

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

function Parent() {
  return (
    <div>
      <h1>I'm the parent.</h1>
      <Child text={"I'm the child."} /> // 상위 컴포넌트에서 속성과 값을 전달한다.
    </div>
  );
};

function Child(props) { // 하위 컴포넌트에서 props를 전달받는다.
  return (
    <div>
      <p>{props.text}</p> // props는 객체이므로 dot notation으로 값에 접근할 수 있다.
    </div>
  );
};

JSX에서 속성과 값 정의하는 법

HTML에서 속성과 값을 할당하는 방법과 유사하나, 전달하고자 하는 값을 중괄호{}를 이용해 감싸줘야 한다.

<!--HTML-->
<tag attribute="value"></tag>

// JSX
<Component attribute={value}/>

props.children

props를 전달하는 또 다른 방법으로, 자식 컴포넌트의 여는 태그와 닫는 태그 사이에 value를 넣어 전달할 수 있다.
이 경우에는 props.children으로 값에 접근할 수 있다.

예시 1)

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
        // I'm the eldest child
    </div>
  );
};

예시 2)

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn>{itemOne}{itemTwo}</Learn>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">{props.children}</div>;
  // React를 배우고 있습니다.
};

props 전달하는 방법 4가지

아래의 Hello 컴포넌트에 name이라는 props를 전달하는 방법은 4가지가 있다.

function Hello(props) {
  return <div>{props.name}{/div>;
}

1. 함수 선언식

function Say() {
  return (
    <Hello name="Jieun" />
  );
}

2. 함수 표현식 (화살표 함수)

const Say = () => <Hello name={"Jieun"} />;

3. 변수에 값을 할당한 후, 전달

function Say() {
  const name = "Jieun";
  return <Hello name={name} />;
}

4. 변수 props에 값을 할당한 후, 전개 구문(spread syntax) 이용해 전달

function Say() {
  const props = {
    name: "Jieun"
  };
  return <Hello {...props} />;
}

❔ 학습 후 궁금한 점

• useState() 구조 분해 할당?
• state hook?