Starting Create React App with Flow

VSCode 확장 도구도 같이 사용하기

동적 언어인 자바스크립트(런타임 시 타입 체크)에선 변수 선언 시 형(Type)에 대한 정의 없이 사용할 수 있기 때문에 빠르고, 덜 고민하여 코딩이 가능하지만 프로젝트 규모가 커지거나 혹은 여러 명이 함께 협업을 해야할 경우 디버깅에서 애먹는 경우가 많습니다.

이외에도 Java나 C를 사용하신 분들이라면 컴파일 시 타입 체크를 해주는 것의 장점에 대해서도 잘 알고 계실겁니다.

리액트에서는 PropTypes로 props에 대한 타입 체크가 가능합니다. PropTypes만 잘 선언하여도 그렇지 않을 경우보다 훨씬 더 안전하게 개발할 수 있습니다. 그렇다면 지금 방법을 놔두고 왜 굳이 Flow를 사용해야 할까요?

Flow란?

Flow는 Facebook에서 개발하였으며 자바스크립트를 위한 정적 타입 체크 라이브러리입니다. 자바스크립트 변수에 타입을 선언할 수 있게 해줍니다.

리액트가 아닌 자바스크립트를 위해 개발되었기 때문에 컴포넌트 쪽이 아닌 Redux나 다른 곳에서도 정적 타입을 체크할 수 있어서 PropTypes만 사용할 때보다 훨씬 더 안전한 개발이 가능하게 됩니다.

지금부터는 create-react-app을 이용한 튜토리얼로 Flow를 쉽고 빠르게 적용시켜보겠습니다.

1. create-react-app으로 프로젝트 시작하기

$ create-react-app flow-test

2. flow-bin 설치

해당 프로젝트에서 flow-bin 라이브러리를 설치해줍니다.

$ cd flow-test
$ npm install --save-dev flow-bin 또는 yarn add --dev flow-bin

만약 create-react-app을 eject하고 싶으신 경우엔 eject를 먼저 한 뒤에 flow-bin을 설치해주시길 바랍니다.

3. package.json 파일 내에 scripts 추가

아래 그림처럼 scripts에 “flow”: “flow”를 추가해주세요. 저는 eject를 시킨 프로젝트에서 적용을 하였습니다.

4. flow init을 통해 .flowconfig 파일 생성

$ npm run flow init 또는 yarn flow init

그러면 위와 같이 .flowconfig 파일이 생성됩니다. 자 벌써 끝났습니다.

5. 정적 타입 체크하고 싶은 파일 제일 상단에 // @flow 추가하기

이렇게 코드를 작성하고 npm run flow 또는 yarn run flow을 하면 아래와 같은 에러 메시지를 뱉습니다.

하지만 VSCode에선 잘못된 부분을 확인할 수 없습니다.

이 때 VSCode 확장 도구 설치를 통해 해결할 수 있습니다. 마켓 플레이스에서 flow를 검색하면 vscode-flow-ide가 나오는데 설치해주세요.

설치 후 VSCode를 재실행하거나 ‘다시 로드'를 누르면 이제 아까 Component 부분에 빨간 밑줄이 그어지는 것을 확인하실 수 있습니다. 그럼 이제 Props와 State를 직접 type 선언하여 적용시켜 보겠습니다.

$ npm run flow 또는 yarn flow

그리고 다시 명령어를 돌리면 No errors!가 나오지만 여전히 빨간 줄은 사라지지 않습니다. 내용을 보면,

.ts (TypeScript) 파일에서만 사용할 수 있다는 문구가 나옵니다. 저는 사용자 설정(command + ,)에서

"javascript.validate.enable": false

를 추가해주니까 사라졌습니다.

간단히 flow를 확인해보기 위해 위와 같은 코드를 작성했습니다. 그러면 handleToggle에서 boolean type으로 선언된 isOpen에 number type의 33을 넣기 때문에 에러를 발생시키고 typeCheck에 받는 인자를 number type으로 받기로 했는데 31번째 줄에 ‘lotte.com’은 string type이기 때문에 에러를 발생시킵니다.

다양한 Flow Type과 더 많은 정보들은 Flow Documentation에서 확인할 수 있습니다.

flow의 활용도를 높이기 위해 저는 start 스크립트 실행 전에 flow를 먼저 실행하게끔 하여 매번 npm run flow를 하지 않아도 되게끔 하였는데, 가끔은 단점이 되기도 하는 것 같습니다.

참고 사이트

Why use static types in JavaScript? (A 4-part primer on static typing with Flow)