props

05 October 2023 - 5 mins read time
Tags: react basic props

props

props란? 컴포넌트끼리 값을 전달하는 수단!

props = property의 약자
상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용하는 값. 주고받기 식은 안된다.
상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖는다.
부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능
숫자를 작성 할 때에는 ""와 {}를 구분할것
‘숫자’는 문자열이다. 연산이 불가능
{숫자}는 숫자열이다. 연산이 가능함
문자열 이외에는 무조건 {} 사용!

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체라고한다. 사령탑인 상위 컴포넌트에서 어떤 데이터를 보낼 것인지를 정하면, 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보내는 방식이다.

props 사용방법

props 를 사용하려면 두 단계가 필요하다.

상위 컴포넌트에서 Props를 지정하여 넘기기
하위 컴포넌트에서 받은 Props값을 렌더링

이 때, 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 단방향 데이터 흐름이다.

1️⃣ props를 사용한 렌더링

index.js에 name, local, content, age라는 props를 각각 해당하는 값들로 넘겨주고,
Props01.jsx에서 1에서 정의한 값들을 props.name으로 사용해서 화면에 출력되도록 한다.

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* {<App />} */}
    <Props01 name="Yamtto" local= "서울" content="리액트" age={6+1}/>
    <Props02 name="얌또" local= "서울" content="리액트" age={7}/>
  </React.StrictMode>
);

Props01.jsx

import React from "react";

function Props01(props) {
    return (
        <div>
            <h1>안녕하세요 저는 {props.name}입니다.</h1>
            <p>저는 {props.local}에 살고 있습니다.</p>
            <p>배우는 과목은 {props.content}입니다.</p>
            <p>나이는 {props.age}살 입니다.</p>
        </div>
    );
}

export default Props01;

또는 비구조화 할당 ( 객체에서 값을 추출하는 문법 ) 비구조화할당으로 간결하게 작성 가능하다. 결과는 똑같다.

Props02.jsx

import React from "react";

function Props02({name, local, content, age}) {
    /* 비 구조화 할당 */
    return(
        <div>
        <h1>안녕하세요 저는 {name}입니다.</h1>
        <p>저는 {local}에 살고 있습니다.</p>
        <p>배우는 과목은 {content}입니다.</p>
        <p>나이는 {age}살 입니다.</p>
        </div>
    )
}

export default Props02;

🔍 결과

2️⃣ defaultProps 로 기본값 설정하기

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

위에서 작성한 index.js에서 name만 빼서 props 기본값 설정 테스트를 해보자

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* {<App />} */}
    <Props01/>
  </React.StrictMode>
);

Props01.jsx

import React from "react";

function Props01(props) {
    return (
        <div>
            <h1>안녕하세요 저는 {props.name}입니다.</h1>
            <p>저는 {props.local}에 살고 있습니다.</p>
            <p>배우는 과목은 {props.content}입니다.</p>
            <p>나이는 {props.age}살 입니다.</p>
        </div>
    );
}

Props01.defaultProps = {
    name:'임시이름',
    local : '서울',
    content : '리액트',
    age : '27'
}

export default Props01;

🔍 결과

3️⃣ props.children로 태그 사이의 값 가져오기

태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 사용한다.

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* {<App />} */}
    <Wrap>
      <Props/>
    <wrap>
  </React.StrictMode>
);

Wrap의 children은 Props가 된다.

Props.jsx

import React from "react";

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

Props.defaultProps = {
    name:'children'
}

export default Props;

Wrap.jsx

import React from 'react'

function Wrap({children}) {
    return(
      <>
      	{children}
      </>
    )
  }

export default Wrap;

🔍 결과

Fragment만 사용하면 아무것도 렌더링이 되지않으나,

위처럼 사이에 {children} 을 넣어주면 내부의 “Hello, children”이 화면에 나타난다.