Redux 공식문서 들여다보기_타입스크립트와 사용할 때_1회

Daniel Woo·2022년 3월 24일
0
post-thumbnail

괜히 공식문서인가 아니구나..!

타입스크립트 프로젝트를 진행하면서 Redux사용에 막힘이 있었기 때문에 구글링을 통해 보완하고자하였다.

평소에는 빠르게 적용하고싶은 마음에 간단히 정리된 블로그나 stack overflow 등을 우선적으로 이용했다. 하지만, 평소 '공식 문서를 이용하라'라는 말을 귀에 못 밖히도록 들었고, 이번에는 진득하게 파헤쳐서 Redux with TypeScript를 마스터 하고 싶었기 때문에 공식문서를 들추어 보았다.

그렇게 Redux 개발팀의 공식문서를 보게 되었는데 처음부터 끝까지 필요한 내용에 대한 설명, 사용방법과 그 이유까지 누구나 이용할 수 있도록 친절하게 설명되어 있었다.

'아...이래서 공식문서를 사용하라는 거구나...!!' 생각이 들면서 그동안 공식 문서 이용을 소홀히 한 것을 잠시나마 되돌아보았다. 하지만, 과거는 과거! 오늘 교훈을 바탕으로 앞으로 공식문서를 적극 이용하면 되는 것이다.

반성은 뒤로하고, 타입스크립트에서 Redux를 어떻게 쓰면 좋은지, Redux 팀 오피셜로 빠르게 알아보자!!

타입스크립트와 사용하기

배우는 것

  • TS환경에서 Redux를 세팅하는 표준 패턴
  • Redux 코드를 올바르게 설계하는 하는 기술

필요 조건

  • 타입스크립트의 문법과 용어에 대한 이해
  • 제네릭, 타입과 같은 타입스크립트 개념의 친숙함
  • 리액트 Hooks에 대한 지식

개요

타입스크립트의 강점

  • reducer, state, action 함수 그리고 UI 컴포넌트에 대해 타입 안정성이 있다.
  • 타입이 지정된 코드에 대해 리팩토링이 용이하다.
  • 팀 환경에서 보다 수월한 개발 경험을 준다.

Redux팀은 Redux를 사용할 때 타입스크립트 사용을 강력하게 추천한다. 하지만, 타입스크립트는 트레이드 오프이다. 추가적인 코드, 타입스크립트 문법에 대한 이해 등 이용하는 데서 오는 용어의 복잡성이 늘어난다. 동시에, 개발에서 런타임 이전에 에러를 잡는다던지, 더 안전하고, 효율적인 리팩토링을 가능하게 해주는 이점이 있다. 또한, 기존에 있는 코드에 대해 문서와 같은 역할을 하기도 한다.

Redux팀은 특히, 큰 규모의 프로젝트에서 타입스크립트를 사용할 때 오는 이점이 그 단점보다 충분하다고 생각한다. 하지만, 우리는 우리의 프로젝트에서 타입스크립트를 트레이드오프가 있음에도 불구하고 사용할 가칙다 있는지를 스스로 평가해볼 필요가 있다.

Redux의 코드를 타입체크 하는 방법에는 다양한 방법이 있다. 이 문서에서는 Redux 팀의 Redux와 타입스크립트를 같이 사용하는 권장 패턴을 소개할 것이다. 한 번 따라와본다면, 괜찮은 TS 사용 경험을 얻을 것이다. 타입 안정성과 자신의 코드에 추가해야 할 타입 선언의 총량 사이에서 최상의 트레이드오프를 터득하는 것처럼 말이다.

정리해보기

Redux 팀은 프로젝트에 타입스크립트를 이용하는 것은 트레이드 오프라고 했다. 타입스크립트를 무조건 사용하는 것은 어떠한 프로젝트에서는 오히려 독이 될 수 있다는 것이다.

무조건 타입스크립트를 사용하려고 하는 것이 아닌, 잃는 점보다 얻는 점이 충분히 많다고 판단되었을 때, 사용하는 것이 가장 합리적인 판단일 것이라고 생각한다.

한편, 팀 협업에서는 역시 타입스크립트의 장점이 단점보다 부각될 수 밖에 없는 것 같다. Redux와 타입스크립트 모두 우선 개념과 사용법에 익숙해야 필요할 경우 어렵지 않게 적용할 수 있으니 공식 문서를 기반으로 더 깊이 있게 시리즈를 작성해볼 계획이다.


참고 자료: Redux 공식문서 - Usage with TypeScirpt

profile
모두가행복한세상을만들고싶은사람

0개의 댓글