[React] 리액트 컴포넌트에 props 전달하기

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

Props 사용

만약 App컴포넌트에서 Hello컴포넌트로 name이라는 변수 값을 전달해주고 싶다면 아래와 같이 코드를 작성합니다.

App.jsx

import React from "react";
import Hello from "./components/Hello";

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

export default App;

components/Hello.jsx

import React from "react";

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

사용법

• 컴포넌트 내부에서 코드를 작성합니다.

<Hello name="이름">

• 받는 쪽은 props라는 예약어를 통해 받습니다.

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

 

 

비구조화 할당

컴포넌트의 파라미터에서 { } 안에 받는 내용을 미리 표기합니다.

App.jsx

import React from "react";
import Hello from "./components/Hello";

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

export default App;

components/Hello.jsx

import React from "react";

function Hello({ name, color }) {
  return <div style={{ color }}>Hello {name}</div>;
}
export default Hello;

 

props 내부의 값을 조회할 때마다 props.***** 를 쓰지 않고 코드를 좀 더 간결하게 작성할 수 있습니다. 

 

 

defaultProps

컴포넌트에서 props를 지정하지 않았을 때에 Default 값을 설정하고 싶다면 defaultProps로 설정이 가능합니다.

App.jsx

import React from "react";
import Hello from "./components/Hello";

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

export default App;

components/Hello.jsx

import React from "react";

function Hello({ name, color }) {
  return <div style={{ color }}>Hello {name}</div>;
}

Hello.defaultProps = {
  name: "이름없음",
  color: "red",
};

export default Hello;

 

 

Props.children

• 컴포넌트 태그 사이에 값이 있을 때 'children'이란 예약어를 사용하여 표시 가능

먼저 components파일 안에 Wrapper.jsx라는 파일을 생성합니다.

components/Wrapper.jsx

import React from "react";

function Wrapper() {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}></div>;
}

export default Wrapper;

components/Hello.jsx

import React from "react";

function Hello({ name, color }) {
  return <div style={{ color }}>Hello {name}</div>;
}

Hello.defaultProps = {
  name: "이름없음",
  color: "red",
};

export default Hello;

App.jsx

import React from "react";
import Hello from "./components/Hello";
import Wrapper from "./components/Wrapper";

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

export default App;

App.jsx에서 Wrapper 컴포넌트를 import 하고 적용시켜줬지만
Wrapper 내부에 보여야 할 Hello 컴포넌트들이 보이지 않습니다.

내부에 내용이 보이게 하기 위해서는 Wrapper에서 props.children을 렌더링 해주어야 합니다.
Wrapper.jsx파일을 다음과 같이 수정해줍니다.

Wrapper.jsx

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

children은 사용자 지정 이름이 아니므로 꼭 children을 사용해주어야 합니다!

 

 

📚 참고

https://react.vlpt.us/basic/05-props.html