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

public_danuel·2019년 4월 16일
4

trendy React

목록 보기
7/21
post-thumbnail

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

선수지식

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

JSX 문법 확장

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

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

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

Props 소개

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

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

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

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

defaultProps

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

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

못 다한 이야기

  1. propTypes

    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개의 답글