Props로 자식 Element 전달하기

자식 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이 없기 때문에 더욱 더 문제를 찾기 어렵지요.