Props 기본 개념 및 실습

React공식문서

부모가 자식 컴포넌트에게 어떤 값을 넘겨주고 싶은 경우에는 props를 이용할 수 있습니다.

• props는 읽기 전용입니다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

1. Props 실습

App.js

import './App.css';
import Header from './components/Header'

function App() {
  return (
    <div className="App">
      <Header title={"Learn React A"} />
      <Header title={"Learn React B"} />
      <Header title={"Learn React C"} />
    </div>
  );
}

export default App;

Header.js

import React from "react"
import logo from '../logo.svg';

const Header = (props) => {
  return (
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      {props.title}
    </a>
  </header>
  )
}

export default Header;

2. props.children

모든 props는 children이라는 key를 가지고 있습니다.

React공식문서

모든 컴포넌트에서 props.children를 사용할 수 있습니다. props.children은 컴포넌트의 여는 태그와 닫는 태그 사이의 내용을 포함합니다. 예를 들어,

<Welcome>Hello world!</Welcome>
Hello world! 문자열은 Welcome 컴포넌트의 props.children으로 사용할 수 있습니다.

function Welcome(props) {
  return <p>{props.children}</p>;
}

결국, welcome컴포넌트에 어떤 텍스트를 넘기고 싶은 경우 아래의 두가지 방법으로 넘길 수 있습니다.

언제 props.children을 사용하나요?

즉, 사용자정의 컴포넌트 안에 있는 렌더링구조를 사용하는 쪽에서 예측할 수 있는 경우 사용을 합니다.

3. props 를 더 잘 다루기

3-1 props사용

App.js

import './App.css';
import Header from './components/Header'
import Welcome from './components/Welcome'

function App() {
  return (
    <div className="App">
      <Header />
      <Welcome firstname={"0soe"} lastName={"Roh"}/>
    </div>
  );
}

export default App;

Welcom.js

import React from 'react';
import cat from '../images/cat.jpg'

export default function Welcome(props) {

  return (
    <>
    <img src={cat} alt="welcomeCat" height="200"/>
    <div>Hello!</div>
    <div>
      <span>{props.firstName}</span>
      {props.lastName}
     </div>
    </>
  );
}

3-2 조건부 렌더링

App.js

import './App.css';
import Header from './components/Header'
import Welcome from './components/Welcome'

function App() {
  return (
    <div className="App">
      <Header />
      <Welcome firstname={"0soe"} lastName={"Roh"} withImg={true}/>
    </div>
  );
}

export default App;

Welcom.js

import React from 'react';
import cat from '../images/cat.jpg'

export default function Welcome(props) {

  return (
    <>  //props.withImg가 true인 경우에만 고양이 이미지가 보여지게 설정
    {props.withImg &&  <img src={cat} alt="welcomeCat" height="200"/>}
    <div>Hello!</div>
    <div>
      <span>{props.firstName}</span>
      {props.lastName}
     </div>
    </>
  );
}

• withImg가 true인지 false인지에 따라 조건부렌더링이 되게 됩니다.

그런데 withImg에 아무런 값도 넣지 않고 전달을 한 경우에는 고양이이미지가 보여지게 됩니다.

아무런 값도 넘기지 않은 경우 react에서의 default값은 true입니다.

4.객체구조분해할당을 이용한 props전달

아래와 같이 props를 받은 쪽에서 뿐만 아니라 넘기는 쪽에서도 객체로 데이터를 담아 넘길 수도 있습니다.

App.js

import './App.css';
import Header from './components/Header'
import Welcome from './components/Welcome'

function App() {
  const info = {
    firstName:"0seo",
    lastName:"Roh",
    withImg: true
  }
  return (
    <div className="App">
      <Header />
      <Welcome {...info}/>
    </div>
  );
}

export default App;

Welcom.js

import React from 'react';
import cat from '../images/cat.jpg'

export default function Welcome({withImg, firstName, lastName}) {

  return (
    <>
    {withImg && <img src={cat} alt="welcomeCat" height="200"/>}
    <div>Hello!</div>
    <div>
      <span>{firstName}</span>
      {lastName}
    </div>
    </>
  );
}