React
  • 리액트 강의
  • * 강의 수강 전 준비 (중요)
  • 기본 개념
    • Node.js & npm
    • npm과 npx의 차이에 대해서
    • Babel
    • Bundler
    • Class
    • this
    • import, export에 관해서
    • Arrow function
    • Map
  • 1강
    • React가 뭐야?
    • 리액트를 왜 배우니 ?
    • CRA를 활용한 리액트 앱 만들기
    • 태초에 DOM이 있었다.
    • React에는 HTML이 없나요 ?
    • Component Of React
    • 영화 소개 프로젝트: 프로젝트 생성
    • JSX
    • props & state
    • 영화 소개 프로젝트: 컴포넌트 작성
  • 2강
    • 라이프사이클
      • 라이프 사이클이 뭔데?
      • render
      • componentDidMount
      • componentDidUpdate
      • componentWillUnmount
      • 라이프 사이클의 동작
    • 리액트의 스타일링
      • Pure css
      • SCSS
      • Styled-components
    • 영화 소개 프로젝트: SCSS, Styled-component
    • 영화 소개 프로젝트: 외부 라이브러리 사용해보기
    • LifeCycle Of React component - Deprecated
    • Optimizing of component - Deprecated
    • scss note - Deprecated
  • 3강
    • props 에러 관리
      • defaultProps
      • prop-types
      • 그냥 타입스크립트 쓰세요
    • Routing (준비)
    • Routing (실전)
    • history를 이용한 뒤로 가기 버튼 구현
    • 영화 소개 프로젝트: 라우팅
    • 한국 전통 음식 소개 페이지 만들기 - Deprecated
  • 4강
    • Ajax In React
    • Form in react
    • Unsplash API를 이용한 사진첩 만들기
    • Redux - 데이터를 관리하는 또 다른 방법 - Deprecated
  • 부록
    • CRA 프록시 서버 설정하는 방법
Powered by GitBook
On this page
  • 가독성 까지 높여보는 시간
  • 개발을 행복하게 합시다.

Was this helpful?

  1. 3강
  2. props 에러 관리

prop-types

라이브러리를 활용한 props관리

PreviousdefaultPropsNext그냥 타입스크립트 쓰세요

Last updated 6 years ago

Was this helpful?

가독성 까지 높여보는 시간

defaultProps로 기본적인 에러를 잡긴 했지만, 항상 props를 넘겨줄 때마다 child 컴포넌트가 가지는 props의 타입을 확인하려면 변수를 하나하나 살펴봐야 하는 점이 마음에 안들어요. defaultProps의 데이터가 복잡하면 그만큼 컴포넌트 한켠을 차지하게 되기 때문입니다. 단순한 더미데이터 | 에러방지 목적인데 말이죠. 이런 불편한 점까지 해결을 해 보도록 하겠습니다. prop-types 라이브러리로 완벽한 해결은 쉽지 않겠지만 그래도 가독성 측면에서 훨씬 더 좋은 이점을 얻을 수 있습니다. 완벽한 해결이 되지 않는 이유 중 하나는 JS의 타입 체킹이 느슨하기 때문에 IDE가 어떤 props를 가져야 하는지 하이라이팅을 띄워주기가 쉽지 않기 때문입니다.

개발을 행복하게 합시다.

정말 개발을 행복하게 타입 에러 없이 하고 싶다면 `타입스크립트` 를 사용하는 것을 추천드립니다만, (강력하게, 사용중) 이미 JS로 리액트 개발을 진행하고 있다면 JS to TS전환은 쉬운 일이 아닙니다. 그럴 때 리액트에 붙일 수 있는 강력한 타입 접착제가 있는데, 바로 Prop-types입니다. facebook에서 밀어주고 있는 아주 괜찮은 친구에요. 기존에 defaultProps예제를 prop-types로 전환해 보도록 하겠습니다. 우선 prop-types를 설치해 주어야겠죠?

yarn add prop-type or npm i prop-types

설치를 완료하셨으면 이제 코드를 작성해 보도록 하겠습니다.

defaultProps 부분은 지워주도록 하겠습니다. 그리고 App.js에서 props넘겨주는 부분도 일단 지워주세요. 그다음, child컴포넌트를 다음과 같이 작성해 주세요.

Prop-types라이브러리를 처음 사용하는 사용자도 testArray에 어떤 값이 들어갈 지 알수 있습니다. 저 배열의 원소는 string 타입이 되겠군요.

너무 간단한 예제이기도 하고 사실 한개의 배열 props를 받는 경우에는 prop-types를 사용할 이유가 없지만, 개발 막바지에 타입 체킹하러 리액트의 모든 파일을 돌아다닐 바에야 이렇게 처음부터 확실히 정의하고 가는 것이 더 좋지 않을까 생각합니다.

설치 중...
먼저 import를 해야 합니다.
prop-types