React 컴포넌트의 Props 알아보기

시리즈

2024. 11. 13. PM 2:44:25

#React #리액트 #Props #컴포넌트

Props를 알아봅시다.

개요

React 컴포넌트는 JavaScript 관점에선 함수잖아요. Props는 JavaScript 관점에선 함수 인자(argument)입니다. 그럼 React 컴포넌트 관점에선 뭘까요? 컴포넌트에 데이터를 전달하는 기능입니다. 다양한 자료형의 값을 전달할 수 있는데, 컴포넌트나 React Element도 전달할 수 있습니다.

구독 컴포넌트 기본 구현

Props를 실습하기 전에 푸딩캠프 소식지 구독 UI를 컴포넌트로 분리하겠습니다. 먼저 App.jsx 파일이 있는 곳에 Subscription.jsx 파일을 만들고 다음 코드를 작성합니다. App.jsx에 있는 코드를 복사해서 붙여넣지 말고, 꼭 손으로 작성하세요! 그래야 학습이 되고 익숙해져요. JSX 문법이 익숙하지 않으면 더욱 더 말이죠.

import { useState } from 'react';

function Subscription() {
  const [email, setEmail] = useState("")
  return (
    <>
      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={['email-input', email ? 'email-input--entered' : '']}
      />
      <button>구독하기</button>
    </>
  )
}

export default Subscription;

이번엔 App.jsx에 Subscription.jsx에 구현한 컴포넌트를 반영할게요.

import './App.css';

import { useState } from 'react';

import Subscription from './Subscription';

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>

      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <Subscription />

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}
    </div>
  )
}

export default App;

Subscription.jsx 파일을 App.jsx 파일로 가져온(import 문) 뒤 구독 관련 JSX 구문을 Subscription 컴포넌트로 대체했습니다. 웹 브라우저에서 확인하면 코드를 변경하기 전과 거의 동일한데요. E-mail 주소를 넣어도 화면에 아무 반응이 없습니다. Props 실습을 하며 손보겠습니다.

여기까지 진행한 커밋

구독하기 버튼의 라벨을 Props로 전달하기

소소하게 구독하기 버튼의 라벨을 Props로 전달받아서 사용하겠습니다. Subscription.jsx 파일을 열고 다음과 같이 변경합니다.

function Subscription(props) {
  const [email, setEmail] = useState("");
  
  const { buttonLabel } = props;
  
  return (
    <>
      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={['email-input', email ? 'email-input--entered' : '']}
      />
      <button>{buttonLabel}</button>
    </>
  )
}

컴포넌트는 인자로 Props 객체로 받습니다. React 컴포넌트의 속성(property)명이 객체의 키, 속성에 지정한 값은 객체의 값이 되지요. 그런데 대개는 함수 인자로 받을 때 구조 분해 할당으로 짧게 줄여서 받습니다.

function Subscription({ buttonLabel }) {
  const [email, setEmail] = useState("");
  
  return (
    <>
      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={['email-input', email ? 'email-input--entered' : '']}
      />
      <button>{buttonLabel}</button>
    </>
  )
}

이번엔 Subscription 컴포넌트로 buttonLabel을 전달할게요. App.jsx 파일을 열고 Subscription 컴포넌트쪽 코드를 변경합니다.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>

      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <Subscription buttonLabel="구독하세요!" />

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}
    </div>
  )
}

속성을 따옴표로 묶어 전달하면 문자열로 전달됩니다. 중괄호로 감싼다면 명시적으로 문자열로 전달해야 하죠.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>

      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <Subscription buttonLabel={'구독하세요!'} />

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}
    </div>
  )
}

저장하면 잘 동작합니다.

여기까지 진행한 커밋

구독 버튼 누르면 App.jsx에 알려주기

현재는 E-mail 주소를 입력해도 화면에 표시가 안 되고 “입력했당” 문구도 표시되지 않습니다. 이 동작은 App 컴포넌트에서 이뤄지는데, 사용자가 입력하는 값은 Subscription 컴포넌트는 알지만 App 컴포넌트는 모르기 때문이죠. 이번엔 Subscription에서 구독하기 버튼을 누르면 Subscription 컴포넌트가 App 컴포넌트에게 사용자가 입력한 E-mail 주소를 알려주도록 하겠습니다.

이번엔 App 컴포넌트부터 구현할게요.

function App() {
  const [email, setEmail] = useState("")

  const handleSubscribe = (value) => {
    setEmail(value)
  }

  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>

      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <Subscription buttonLabel="구독하세요!" onSubscribe={handleSubscribe} />

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}
    </div>
  )
}

handleSubscribe() 함수를 만들었는데, 이 함수는 setEmail() 함수를 이용해 상태요소인 email 값을 할당합니다. handleSubscribe() 함수는 Subscription 컴포넌트에 Props로 전달합니다. 자식 컴포넌트인 Subscription에서 Props로 전달받은 함수를 사용할 거거든요. 구현해봅시다.

function Subscription({ buttonLabel, onSubscribe }) {
  const [email, setEmail] = useState("")

  const handleSubmit = () => {
    onSubscribe(email);
  }
  
  return (
    <>
      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleSubmit}>{buttonLabel}</button>
    </>
  )
}

조금 복잡해보이는데요. 동작 흐름을 따라가보겠습니다.

사용자가 E-mail 주소를 입력합니다.
setEmail() 함수가 동작하여 email의 값이 할당되지요.
이제 버튼을 누르면 handleSubmit() 함수가 호출됩니다.
handleSubmit() 함수는 onSubscribe() 함수에 email 값을 인자로 전달하며 호출하는데,
onSubscribe() 함수는 Props로 전달받은 함수입니다.

이제 App 컴포넌트로 흐름이 넘어옵니다.

function App() {
  const [email, setEmail] = useState("")

  const handleSubscribe = (value) => {
    setEmail(value)
  }

  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>

      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <Subscription buttonLabel="구독하세요!" onSubscribe={handleSubscribe} />

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}
    </div>
  )
}

handleSubscribe() 함수가 Subscription 컴포넌트로부터 호출되어 실행됩니다.
handleSubscribe() 함수는 Subscription 컴포넌트로부터 넘겨받은 인자값(E-mail)을 setEmail() 함수에 전달하며 호출합니다.
email 값이 반영되고, E-mail 주소를 표시하고 "입력했당" 문자열이 표시됩니다.

컴포넌트 간 Props를 전달하고 전달받는 구현을 할 때, 처음엔 Props를 받는 쪽(Subscription), 그러니까 자식 컴포넌트부터 구현했고, 그 다음엔 Props를 전달하는 쪽(App), 그러니까 부모 컴포넌트부터 구현했습니다. 사람마다 먼저 구현하는 방식은 다르지만, 저는 Props로 전달하는 값이 함수이면 부모 컴포넌트쪽부터 구현하고, 함수가 아니면 Props를 자식 컴포넌트부터 구현하는 편입니다.

여기까지 진행한 커밋

boolean을 Props로 전달하는 방법

React 컴포넌트는 HTML과 마찬가지로 속성을 명시하는 것만으로 해당 속성을 true로 평가합니다.

<Subscription required={true} />

이 구문은 다음 구문과 동일합니다.

<Subscription required />

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠