React에서 똑똑하게 Props 관리하기

PropTypes, 혹은 TypeScript로 props의 타입을 정해주는 방법 알아보기

Published in

None

8 min readDec 10, 2019

안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다.
이번 포스트에서는 Props에 타입을 지정해서 육안만으로 예측이 어려운 Props를 조금 더 똑똑하게 관리하는 방법을 알아보겠습니다.

난 천재라서 상관없어

아무리 천재라도 컴퓨터보다 정확할 수는 없으리라고 생각합니다. 이런 상황들을 마주할 때 말이죠.

최악의 상황

이 코드만 봐도, 2가지의 문제가 발생합니다.

MainPage에서 어떤 props를 필요로 하는 지 모른다.
App에서 MainPageContainer로 어떤 props를 전달해야 하는 지 모른다.

사실 이렇게 코드가 짧으면, 당신은 잠깐 천재로 빙의해서 모든 props를 다 알아맞출 수 있습니다. 그렇지만 depth가 깊어지고,props를 좀 많이 줘야 하는 상황이 온다면 어떨까요?

아래부터는 이런 상황들을 방지하기 위해 사용할 수 있는 여러 가지 방법을 알려드리려고 합니다.

그 전에

props가 복잡해지기 전, 먼저 depth와 넘겨주는 값들을 줄여보는 것은 어떨까요?

예를 들자면, react-redux에는 리덕스 안 리듀서의 state와 dispatch를 넘겨받을 수 있도록 고차 컴포넌트를 반환하는 connect() 함수가 있습니다. 그러나, 이 함수를 대신할 새로운 방법으로 useSelector()와 useDispatch() 훅을 사용할 수 있습니다.

이 두 개로 커스텀 훅을 만들면, depth가 하나 줄어들게 되고 받아오는 만큼의 props 개수를 줄일 수 있습니다.

또 권장하는 방법은, props에 Object Destructuring을 사용하여 어떤 이름의 props가 올 것인지라도 유추할 수 있는 방법이 있습니다.

props를 쪼갠 예시

이외에도 Hooks API 사용하기, 고차 컴포넌트 덜 사용하기, 지나친 props drilling 피하기, Context API 사용하기 등의 방법이 있습니다. 글의 주제는 아니니, 궁금한 부분에 대해서는 구글링 실력을 발휘해주세요 :)

useSelector() 및 useDispatch(): https://react-redux.js.org/next/api/hooks
Object Destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

PropTypes 사용하기

링크: https://github.com/facebook/prop-types

정말 간단하고, 또 유용하게 사용할 수 있습니다. 별도의 세팅 없이도, 단순히 아래 명령어로 prop-types 패키지를 설치하기만 하면 사용할 수 있습니다.

$ npm i --save prop-typesor$ yarn add prop-types

예시로 하나의 컴포넌트를 만들 건데, 단순히 이름을 받아서 Hello를 앞에 붙여주는 컴포넌트입니다.

만들고 나면, 브라우저에서는 이렇게 보일 겁니다.

하지만 지금 name의 타입이 어떤 종류라도, 다 받아서 사용할 수 있습니다!

그래서 “name이라는 녀석은 string 타입만 받게 하고 싶어.” 라고 생각하시면, 아래처럼 해주시면 됩니다.

이제 App 컴포넌트에서 문자열이 아닌 다른 값을 넣어보세요. 개발자 콘솔에서 에러가 발생합니다.

어느 정도 버그를 잡아낼 수 있다고 생각하지만, 그래도 이 방법으로는 많이 부족한 것 같습니다. 에디터가 먼저 앞장서서 잡아주거나, 에러를 만들어낸다면 조금 더 편하지 않을까요?

TypeScript를 적용해서 Props의 타입 지정하기

TypeScript는 타입이 적용된 JavaScript의 슈퍼셋입니다. 쉽게 말해서, 약타입 언어인 JavaScript에 타입을 지정할 수 있습니다.

아까 알려드린 게 PropTypes인데, TypeScript만 세팅해주면 별다른 세팅 없이 바로 props에 타입을 적용하실 수 있습니다.

이제 prop-types 패키지와 관련 코드를 지우고, TypeScript를 사용할 수 있는 준비를 해줍니다.

$ npm rm --save prop-types
$ npm i --save typescript @types/node @types/react @types/react-dom @types/jestor$ yarn remove prop-types
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest