이번 편에서는 우선 JSX 문법을 확장하고, 동적으로 값을 전달하는 방법인 Props 개념을 알아보겠습니다.

선수지식

이번 편 이후부터는 비구조화 할당을 이용해 설명할 예정이므로 어떤 문법인지 모른다면 비구조화 할당을 먼저 익히고 보는 것을 권장합니다.

JSX 문법 확장

const User = () => {
  return <h1>Danuel</h1>
}

JSX 문법과 컴포넌트는 굉장히 직관적이지만 이것만으로는 아직 무엇인가 부족합니다. 태그 사이의 값이 항상 고정적이기 때문입니다! JSX 문법의 확장이 필요한 순간입니다.

const User = () => {
  const nickname = 'Danuel'

  return <h1>{nickname}</h1>
}

태그 안에서라면 어디든지 중괄호 {} 로 감싼 형태로 변수를 사용할 수 있습니다. 요소를 표현하는 방식과 같습니다.

이 간단한 확장으로 보다 더 유연한 컴포넌트를 작성할 준비가 끝났습니다.

Props 소개

Props는 상위 컴포넌트에서 하위 컴포넌트로만 전달하는 개념이며, 하위 컴포넌트는 상위 컴포넌트에 값을 전달할 수가 없습니다.

• 하위 컴포넌트에서 상위 컴포넌트로 값을 전달하고 방법은 React에서 Props 개념 만큼 중요한 State 개념과 작성하는 방법을 알아야 하므로, 일단 Props를 먼저 알아보겠습니다.

const User = props => (
  <h1>{props.nickname}</h1>
)

const App = () => (
  <div>
    <User nickname='Danuel' />
  </div>
)

상위 컴포넌트에서 하위 컴포넌트에게 데이터를 내려보내는 방식입니다. 즉, 위에서 아래로 흐릅니다.

const User = ({ nickname }) => (
  <h1>{nickname}</h1>
)

const App = () => (
  <div>
    <User nickname='Danuel' />
  </div>
)

비구조화 할당destructuring assignment을 이용하면 조금 더 간소하게 작성할 수 있습니다.

defaultProps

const User = ({ isAdmin, nickname }) => {
  let label = 'user'
  if (isAdmin) {
    label = 'admin'
  }

  return (
    <div>
      <h3>{label}</h3>
      <h1>{nickname}</h1>
    </div>
  )
}

User.defaultProps = {
  isAdmin: false
}

const Users = () => (
  <div>
    <User nickname='Danuel' isAdmin={true} />
    <User nickname='Other' />
  </div>
)

React에는 defaultProps라고 하는 Props의 일부 속성에 기본값을 지정하는 특별한 기능이 있습니다.

익혀두면 상당히 편한 기능이지만, 함수에 속성property를 할당하기 때문에 JavaScript 문법에 익숙하지 않은 분은 이 방식이 상당히 어색할 수 있습니다.

못 다한 이야기

1. propTypes

   import React from 'react'
   import PropTypes from 'prop-types'
   
   const User = ({ nickname }) => (
     <h1>{nickname}</h1>
   )
   
   User.propTypes = {
     nickname: PropTypes.string
   }

   JavaScript는 타입 변환에 대해 굉장히 관대한 언어이기 때문에 실수가 자주 발생합니다. 그러한 실수를 방지하기 위해서 React는 propTypes라는 기능을 통해 타입체크를 지원합니다.

   처음에는 이 기능을 React 자체적으로 지원했지만, 여러 변화를 따라 prop-types라는 별도의 라이브러리로 분리하고 이전에 작성한 코드와의 하위호환을 위해 남아있습니다. 이 강좌를 끝낸 후 여유가 있다면 TypeScript로 React를 해보는 것을 추천합니다. React는 Flow라는 언어로 작성을 했고 활발한 커뮤니티 지원 덕분에 TypeScript에 대한 타입 지원이 굉장히 좋은데, 이것은 propTypes를 별도의 라이브러리로 분리한 이유 중 하나입니다.