[React] 컴포넌트에 값 전달하기

chaen·2024년 4월 5일

REACT / NEXT.js

목록 보기

5/22

❓ Props란

리액트에서는 부모가 자식 컴포넌트에 단일 객체 형태로 값을 전달할 수 있습니다. 이 객체를 리액트에서는 Props(Properties)라고 합니다.

Props는 부모만이 자식 컴포넌트에 전달할 수 있습니다. 따라서 Body 컴포넌트에 Props를 전달하려면 부모인 App 컴포넌트에서 전달해야 합니다.

Props로 값 전달하기

하나의 값 전달하기

import Body from './body'

function App() {
  const name = "이정환";
  return (
    <div>
      <Body name={name} />
    </div>
  );
}

그후 App에서 전달한 Props를 Body 컴포넌트에서 사용할 수 있습니다.

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

여러 개의 값 전달하기

import Body from './body'

function App() {
  const name = "이정환";
  return (
    <div>
      <Body name={name} location={"부천시"} />
    </div>
  );
}

전달받은 두 개의 값은 두 가지 방법으로 받을 수 있습니다.

//1: 속성으로 받기
function Body(props) {
  return (
    <div>
      {props.name}은 {props.location}에 거주합니다
    </div>
  );
}

//2: 구조분해 할당으로 받기
function Body({ name, location }) {
  return (
    <div>
      {name}은 {location}에 거주합니다
    </div>
  );
}

스프레드 연산자로 여러 개의 값 전달하기

import Body from './body'

function App() {
  const BodyProps = {
    name: "홍길동",
    location: "서울특별시",
  };

  return (
    <div className="App">
      <Header />
      <Body {...BodyProps} /> ②
      <Footer />
    </div>
  );
}

스프레드 연산자를 활용하면 객쳇값을 Props로 쉽게 전달할 수 있습니다.

기본값 설정하기

부모 컴포넌트에서 실수로 값을 전달하지 않으면 undefined의 프로퍼티를 읽을 수 없다 라는 오류가 발생합니다. 따라서 defaultProps를 이용하여 컴포넌트가 받을 Props의 기본값을 미리 설정합니다.
//App.jsx
import Body from './body'
function App() {
  const name = "홍길동";
  return (<Body name={name} />);
}
//body.jsx
function Body({ name, location }) {
  console.log(name, location);
  return (
    <div>
      {name}은 {location}에 거주합니다.
    </div>
  );
}
Body.defaultProps = {
  location: "인천시",
};

🔗참고 자료
한 입 크기로 잘라먹는 리액트

chaen

이전 포스트

React에서 사용하는 JSX 문법에 대해 알아보자

다음 포스트