[React] props를 통해 컴포넌트에게 값 전달하기

룽지·2022년 4월 22일

React

목록 보기

4/12

1. props

컴포넌트의 props
props는 properties의 줄임말
어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 사용

2. props의 기본 사용법

Test 컴포넌트에서 Hello 컴포넌트 사용
name이라는 값을 전달

Test.jsx

import { Hello } from './Hello'

export const Test = () => {
  return <Hello name="react" />
}

Hello.jsx

export const Hello = (props) => {
  return <>안녕하세요 {props.name}</>
}

컴포넌트에게 전달되는 props는 파라미터를 통해 조회할 수 있음
props는 객체 형태로 전달
name 값을 조회하고 싶다면 props.name을 조회

3. 여러개의 props, 비구조화 할당

Hello 컴포넌트에 또 다른 props 전달
color 전달

Test.jsx

import { Hello } from './Hello'

export const Test = () => {
  return <Hello name="react" color="red" />
}

Hello.jsx

export const Hello = (props) => {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

비구조화 할당

함수의 파라미터에서 비구조화 할당(혹은 구조 분해) 문법을 사용
- 간결한 코드를 작성할 수 있음

export const Hello = ({ color, name }) => {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

4. defaultProps로 기본값 설정

defaultProps 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 저장

Hello.jsx

export const Hello = ({ color, name }) => {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음',
}

Test.jsx

import { Hello } from './Hello'

export const Test = () => {
  return (
    <>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </>
  )
}

5. props.children

props.children : 컴포넌트 태그 사이에 넣은 값을 조회

Wrapper.jsx

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

Test.jsx

import { Hello } from './Hello'
import { Wrapper } from './Wrapper'

export const Test = () => {
  return (
    <Wrapper>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </Wrapper>
  )
}

Wrapper 태그 내부에 Hello 컴포넌트 두개로, Hello 컴포넌트들은 보여지지 않음
내부의 내용이 보여지기 위해서 Wrapper 안에 props.children을 렌더링함

Wrapper.jsx

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