이번 편에서는 우선 JSX 문법을 확장하고, 동적으로 값을 전달하는 방법인 Props 개념을 알아보겠습니다.
이번 편 이후부터는 비구조화 할당을 이용해 설명할 예정이므로 어떤 문법인지 모른다면 비구조화 할당을 먼저 익히고 보는 것을 권장합니다.
const User = () => {
return <h1>Danuel</h1>
}
JSX 문법과 컴포넌트는 굉장히 직관적이지만 이것만으로는 아직 무엇인가 부족합니다. 태그 사이의 값이 항상 고정적이기 때문입니다! JSX 문법의 확장이 필요한 순간입니다.
const User = () => {
const nickname = 'Danuel'
return <h1>{nickname}</h1>
}
태그 안에서라면 어디든지 중괄호 {}
로 감싼 형태로 변수를 사용할 수 있습니다. 요소를 표현하는 방식과 같습니다.
이 간단한 확장으로 보다 더 유연한 컴포넌트를 작성할 준비가 끝났습니다.
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을 이용하면 조금 더 간소하게 작성할 수 있습니다.
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 문법에 익숙하지 않은 분은 이 방식이 상당히 어색할 수 있습니다.
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를 별도의 라이브러리로 분리한 이유 중 하나입니다.
좋아요와 댓글 감사합니다.
오탈자, 질문 등은 언제든지 댓글로 달아주세요!