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
  • 데이터를 전달해야 하는 컴포넌트의 깊이가 깊다면, defaultProps를 사용하세요.
  • 해결법 중 하나, 그냥 데이터를 제대로 넣어주는 것.
  • 마음을 편안하게 해주는 defaultProps

Was this helpful?

  1. 3강
  2. props 에러 관리

defaultProps

props를 주고받을 때 에러 방지를 위한 또 하나의 방법

Previousprops 에러 관리Nextprop-types

Last updated 6 years ago

Was this helpful?

데이터를 전달해야 하는 컴포넌트의 깊이가 깊다면, defaultProps를 사용하세요.

컴포넌트의 깊이가 깊어져서 props를 child component로 내리는 행위를 여러 번 하게 되면, 개발자의 실수로 props를 넣지 못하는 일이 발생하기도 합니다. 그럴 때에 우리는 보통 렌더링 하는 함수에 예외 처리를 하곤 합니다. 그 예제를 보여 드리겠습니다.

이 컴포넌트를 App.js에서 props를 담지 않고 호출을 해 보겠습니다.

map을 찾을 수 없는 이유는 간단합니다. child컴포넌트에서는 props로 넘어올 testArray라는 친구를 기대하고 있는데, 실제로 App.js에서 렌더링하는 child컴포넌트에는 어떠한 props도 넘겨주지 않거든요. 자바스크립트로 리액트 개발을 진행할 때 많이 하는 실수 중 하나입니다.

해결법 중 하나, 그냥 데이터를 제대로 넣어주는 것.

그렇습니다. 이보다 완벽한 해결 방법은 없어요. 그러나 우리는 다른 방법을 사용해 볼 것입니다. 리액트 개발을 시작하게 되었을 때, 리스트 같은 데이터를 출력하기 위해서는 필수적으로 더미데이터가 필요합니다. 서버와 연동하기 전 리스트가 제대로 보이는지 확인을 해볼 필요가 있으니까요. 그런데 컴포넌트 만드는 시점에서 더미데이터를 만들어 놓기란 상당히 귀찮은 일이죠. 그리고 매번 오류를 확인하기 위해서는 브라우저를 봐야만 확인할 수 있습니다. 상당히 비효율 적인 방식이죠.

마음을 편안하게 해주는 defaultProps

리액트에서 따로 모듈을 설치하지 않고도 해결할 수 있는 방법 중 하나입니다. defaultProps, 말 그대로 props가 가지는 기본값을 미리 할당하는 것 입니다. 위의 예제를 props를 넘겨주지 않고 defaultProps로만 해결을 해 보도록 하겠습니다.

이제 다시 브라우저를 확인하게 되면, 에러가 없는 화면을 보실 수 있습니다.

페이지를 빠르게 개발하고 싶을 때 사용하는 방법 중 하나입니다. 이 방법으로 개발하게 되면 일단 개발 자체의 속도는 엄청나게 올라갑니다. 개발하다 에러를 마주칠 일도 적구요. 만약 defaultProps로 기본 데이터를 할당한 상태에서 새로운 props를 할당하게 되면 어떻게 될까요?

리액트 개발자 도구가 프로그래머의 에러를 어느 정도는 방지해준다고는 하지만, 매번 브라우저 화면이 제대로 렌더링 되는 모습을 확인하면서 개발을 진행하게 되면 개발 속도가 줄어들게 되니, defaultProps를 이용해서 기본적인 에러를 방지하는 방법을 배워보았습니다.

이 때, 을 보면 어떤 일이 발생했을까요?

http://localhost:3000
Child 컴포넌트에서는 부모의 Props를 바탕으로 렌더링을 하게 됩니다.
Props를 담아야 하는데 담지 않았습니다.
map을 찾을 수가 없어요...
Class에 static defaultProps를 할당합니다.
에러 화면 아니에요..! (데이터가 없기 때문)
이번에는 데이터를 제대로 넣어 주었습니다.
새로 받은 props데이터로 대체되는 모습을 보실 수 있습니다.