React 강좌) trendy React 1-3. Props 알아보기

public_danuel·2019년 4월 16일
4

trendy React

목록 보기
7/21
post-thumbnail

이번 편에서는 우선 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를 별도의 라이브러리로 분리한 이유 중 하나입니다.

profile
다뉴하는 코딩

5개의 댓글

comment-user-thumbnail
2019년 4월 16일

좋아요와 댓글 감사합니다.
오탈자, 질문 등은 언제든지 댓글로 달아주세요!

답글 달기
comment-user-thumbnail
2019년 4월 17일

앵귤러를 쓰다가 react로 바꾸려고 하는데, 이 강의를 보면서 개념을 잘 잡아가고 있습니다. 좋은글 감사해요. 앞으로도 잘 부탁드립니다 :)

1개의 답글
comment-user-thumbnail
2019년 4월 30일

리액트 글 잘읽고 있습니다. :)

1개의 답글