[React] 4-2장 | Props의 정의 및 전달법

1. Props의 정의

props 는 리액트 컴포넌트에 전달되는 데이터를 총칭합니다. 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용(스페이스 리프팅)되는데요.

전달 된 props는 자식 쪽에서 수정을 할 수 없다는 특징을 가지고 있으며, 보통 전달 받는 쪽에서의 속성 이름은 props라고 사용을 합니다. (다른 이름으로도 지정 가능합니다.)

1. index.jsx 컴포넌트 페이지

import './App.css'
import Viewer from "./components/Viewer"
import Controller from "./components/Controller"
import { useState } from "react"

function App() {

  const [count, setCount] = useState(0)
  const [input, setInput] = useState("")

  const onClickButton = (value) => {
    setCount(count + value);
  }

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section><input value={input} onChange={(e) => {
        setInput(e.target.value)
      }} /></section>	
      <section><Controller onClickButton={onClickButton} /></section>
    </div>
  )
}
export default App

해당 코드는 간단한 Counter 앱인데요. 위의 코드에서는 Controller 섹션에서 컴포넌트 Controller에 onClickButton 속성 이름과 onClickButton 메서드를 값으로 넘겨주고 있습니다.

2. Controller.jsx 컴포넌트 페이지

import React from 'react'

export default function Controller({onClickButton}) {
  return (
    <div>
      <button onClick={() => {
        onClickButton(-1)
      }}>-1</button>
      <button onClick={() => {
        onClickButton(-10)
      }}>-10</button>
      <button onClick={() => {
        onClickButton(-100)
      }}>-100</button>
      <button onClick={() => {
        onClickButton(100)
      }}>+100</button>
      <button onClick={() => {
        onClickButton(10)
      }}>+10</button>
      <button onClick={() => {
        onClickButton(1)
      }}>+1</button>     
    </div>
  )
}

그리고 위의 코드인 Controller 컴포넌트 에서는 넘겨 받은 메서드가 각각의 버튼 컴포넌트의 onClick 이벤트 코드에 할당되어 들어갑니다.

2. props의 규칙

위의 코드는 분리된 두 컴포넌트 간에 부모 컴포넌트에서 자식 컴포넌트로의 데이터(속성) 이동을 표현한 예시인데요. 이러한 데이터 이동의 주체가 되는 props는 사용할 때 몇 가지 규칙을 가지고 있습니다.

1. 속성은 읽기 전용입니다.

• Controller 컴포넌트에서 onClickButton 함수를 props로 받았습니다. 이 함수는 부모 컴포넌트에서 전달되었으며, Controller 컴포넌트에서는 해당 함수를 호출하여 사용합니다. 하지만 Controller 컴포넌트에서는 이 함수를 변경할 수 없습니다. 이 함수는 읽기 전용입니다.

2. 속성을 사용하여 컴포넌트를 커스터마이징할 수 있습니다.

• Controller 컴포넌트에서는 onClickButton 함수를 props로 받아 버튼 클릭 시 해당 함수를 호출합니다. 이를 통해 Controller 컴포넌트는 동적으로 버튼 클릭에 따라 동작을 변경할 수 있습니다.

3. 속성의 값을 변경하려면 부모 컴포넌트에서 변경해야 합니다.

• onClickButton 함수는 App 컴포넌트에서 정의되고, Controller 컴포넌트로 props로 전달됩니다. onClickButton 함수 내부에서 상태를 변경하고 있지만, 상태를 변경하는 부분은 App 컴포넌트 내부에 있습니다. 이를 통해 속성(props)의 값을 변경할 때는 해당 Props를 전달하는 부모 컴포넌트에서 변경해야 합니다.

4. 속성의 포함, 미포함은 선택적입니다.

• Controller 컴포넌트에서는 onClickButton 함수를 필수 Props로 받았습니다. 하지만 다른 props는 받지 않았으므로 선택적으로 props 설정할 수 있습니다.

5. 속성 전달시 변수의 이름은 동일해야 합니다.

• Controller에서 받는 속성은 하나이지만, 만약 여러 속성을 받게 될 경우 각각의 전달되는 속성의 이름이 일치해야 합니다. 단 순서는 일치하지 않아도 상관 없습니다.

6. 속성 전달시 특정 속성만 받을 수 있습니다.

• 속성을 전달 받을 때 특정 속성만 받을 수 있는데, 이 경우 나머지 개체들은 ``rest 연산자 (...rest)를 지정하여 객체 형태로 따로 받을 수 있거나, 지정해주지 않을 경우 전달되지 않습니다.

7. 속성들을 단 하나의 개체로 받을 수도 있습니다.

• 여러 속성들을 하나의 개체로 전달 받을 때는 통칭 props 라고 네이밍을 하며, 이때 닷 노테이션(.)을 사용하여 전달 받은 값들 중 특정 값들에 접근 및 사용할 수 있습니다.

8. 속성의 기본값을 지정할 수 있습니다.

• 속성이 제대로 전달되지 않은 경우에 대비하여 자식 컴포넌트 쪽에서 특정 속성의 기본값을 지정할 수 있습니다.