Props로 자식 Element 전달하기

시리즈

2024. 10. 3. PM 6:03:32

#리액트 #React #Props #자식 #truthy #falsy #선언형

자식 Element 노드를 Props로 전달받기

HTML 문서를 보면 다음과 같이 마크업하여 DOM을 구성합니다.

<div>
  <h1>푸딩캠프</h1>
  <h2>
	  <a href="https://pudding.camp/~/newsletter">푸딩캠프 뉴스레터</a>
  </h2>
</div>

이를 트리 구조라고 했던 것 기억하실 거예요.

div
├── h1
└── h2
   └── a

이런 구조는 React DOM도 마찬가지입니다. 그리고 HTML과 문법도 같습니다. 푸딩캠프 소식을 이메일로 받아보라는 JSX문을 Subscription 컴포넌트에 내포시켜보겠습니다. div Element에 h1과 h2 Element를 내포시킨 것처럼요.

App.jsx 파일에서 푸딩캠프 뉴스레터 안내 문구가 있는 DOM을 Subscription 하위로 이동시킵니다.

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

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

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

      <Subscription buttonLabel="구독하세요!" onSubscribe={handleSubscribe}>
        <p>
          <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
        </p>
      </Subscription>

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

p Element 부분이 자식 Element가 되었습니다.

Subscription
└── p
   └── a

컴포넌트의 자식 Element는 Props에 children으로 전달됩니다. Subscription.jsx 파일을 고쳐서 확인해보죠.

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

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

Props에 children으로 넘겨받은 자식 Element는 JSX문에서 {children}으로 렌더링합니다. JSX가 HTML과 비슷하지만 다른 부분이 바로 이런 표현입니다. 동적으로 변하는 DOM을 선언하듯이 마크업하는 것이지요. 왜 선언형이냐하면 {children}이라는 표현식이 있는 위치에서 children이 바뀌면 바뀐 내용이 비동기적인 실시간으로 반영됩니다. 엑셀이나 스프레드시트를 써보셨다면 선언형 구문이 낯설지 않을 거예요. A1 셀에 값을 넣고, B1 셀에서 A1 셀 값을 참조하여 수식을 넣습니다. 수식을 선언해 셀에 입력한 것이지요. 이제 A1 값을 변경하면 B1에 표시되는 값도 바뀝니다. 이를 선언형 표현이라고 합니다. 리액트를 비롯해 선언형 방식을 따르는 기술이 곳곳에 있습니다. 방금 예를 든 스프레드시트를 비롯해 HTML, SQL이 바로 전형적인 선언형 방식으로 데이터를 다루는 기술입니다.

여기까지 진행한 커밋

함수를 자식 Element로 전달받기

대개는 자식 Element는 React Element를 전달하지만, 함수를 전달해야 할 때가 있습니다. 이번엔 App 컴포넌트에서 함수를 Subscription 컴포넌트의 자식으로 전달하고, App 컴포넌트에서 useState()를 제거해볼게요.

Subscription.jsx 파일을 열고, Props로 전달받은 children이 함수인지 아닌지로 구분해서 처리하도록 합니다.

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

  const handleSubmit = () => {
    onSubscribe(email);
  }
  
  return (
    <>
      {children instanceof Function ? children('학습과 성장 컨텐츠 소식', email) : children}
      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleSubmit}>{buttonLabel}</button>
    </>
  )
}

children이 함수인 경우 이 함수에 인자를 두 개 전달할게요. 하나는 뉴스레터 안내 타이틀을 문자열로 전달하고, 또 다른 하나는 사용자가 입력한 E-mail을 전달합니다.

App.jsx 파일을 열고 함수를 Subscription로 전달합니다.

function App() {
  const handleSubscribe = (value) => {
    console.log('value from Subscription:', value);
  }

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

      <Subscription buttonLabel="구독하세요!" onSubscribe={handleSubscribe}>
        {(title, email) => (
          <>
            <p>
              <a href="https://pudding.camp/~/newsletter">{title}</a>을 이메일로 받아보세요.
            </p>

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

먼저 App 컴포넌트에 있던 useState() 구문을 제거했습니다. 그리고 JSX 문법으로 화살표 함수를 만들었습니다. 이 함수는 인자 두 개를 받는데, 바로 앞서 Subscription에서 전달하는 타이틀과 사용자가 입력한 E-mail이지요.

잘 작동합니다.

참고로 이 예시는 설명을 위해 다소 억지스럽게 작성한 구현입니다. 여기에선 “이런 게 되는구나”라고 알아두고 나중에 필요한 상황이 오면 활용하세요. 😅

여기까지 진행한 커밋

렌더링하지 않는 값

React는 몇 몇 값을 렌더링하지 않습니다.

false
null
undefined
빈 문자열("")
true

대부분 falsy 값들이지만, 그렇다고 falsy 값 전체가 해당되진 않습니다. 숫자 0과 빈 배열([])은 falsy하지만 출력합니다. 재밌는 건 빈 배열은 truthy처럼 평가됩니다. 빈 객체({})를 출력하려고 하면 아예 오류가 납니다.

function App() {
  return (
    <div>
	  <div>
        <p>아래 값들은 출력되지 않습니다.</p>
        {false}
        {null}
        {undefined}
        {""}
        {true}
	  </div>
      <p>이 값은 출력됩니다. {0}</p>
      {[] && <p>falsy하지만 출력됩니다.</p>}
    </div>
  );
}

이 내용은 숙지할 필요가 있습니다. 많은 사람이 falsy 평가를 했다가 영문을 알 수 없는 숫자 0이 출력되어 몇 시간에서 며칠을 고생하기도 합니다. 특히 API를 통해 외부에서 전달받은 값을 사용하는 경우엔 소스 코드에 숫자 0이 없기 때문에 더욱 더 문제를 찾기 어렵지요.

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

이전 컨텐츠

다음 컨텐츠