본문 바로가기
1일1글

[1일1글] The Ugly Side of React Hooks (리액트 훅스의 어두운면) 그럼에도 내가 react-hooks를 쓰는 이유

by 윤-찬미 2021. 3. 22.

* [1일1글] 다양한 커뮤니티사이트 등에서 본 글을 공유하고 짤막한 저의 생각을 공유합니다.

오늘 단톡방에서 react-hooks와 class에대한 이야기가 나왔길래 얼마전에 읽은 글이 생각나서 공유해본다.

[원문]

medium.com/swlh/the-ugly-side-of-hooks-584f0f8136b6

 

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

medium.com

[번역문]

ui.toast.com/weekly-pick/ko_20200922

 

React Hook의 어두운면 | TOAST UI :: Make Your Web Delicious!

필자는 이 글에서 React Hook에 대한 나의 관점에 대해 공유할 것이며, 이 글의 제목에서 알 수 있듯이 React Hook의 엄청난 팬은 아니다. 공식 React 문서에 설명된 대로 Hook 기반으로 작성된 클래스를

ui.toast.com

🌿

얼마전에 리액트 훅스를 쓰면서 안좋은점(?) 단점을 언급한 글을 보았다.

훅스를 쓰며 단점이라고 생각했던 부분들을 깔끔하게 정리해준 것 같고,

특히 명확한 라이프사이클이 없는 훅스에서의 사이드 이펙트는 전적으로 공감했다. 제대로 쓰지 못하면 사이드이펙트를 야기할 수 있다.

(하지만 이건 반대로 클래스에서도 라이프 사이클에대한 사이드이펙트 문제도 운운되고 있다.)

class를 선호하는 사람들을 존중한다. 어느것이 정답이다. 말하기엔 아직 애매한 경계선상에서 놀고 있지 않나 라는 생각이 든다.

그럼에도 내가 hooks를 사용하는 몇가지 이유가 있다.

🌿

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하는게 유리하다.

class에서는 해당로직을 구현하기 위해 HOC의 패턴을 많이 사용했었다. 이는 흔히 말하는 래퍼 지옥을 볼 수 있다. Hook를 사용하면 컴포넌트로 부터 상태 관련 로직을 추상화 할 수 있다. 이것은 독립적인 테스트와 재사용이 가능하다. Hook는 계층 변화 없이 상태 관련 로직을 재 사용할 수 있도록 한다. 

2. 코드의 길이 

이얘기는 또 다른 이 이야기가 나올 수 있는 부분인데  hooks를 쓰면 코드가 확실히 짧아진다. 생산성을 무시못하는 개발자로써, 이부분도 장점중 하나도 붙어있지 않나 라는 생각이 든다.

또 다른 여러 이유도 있지만, 난 대표적으로 저 두개의 이유때문에 hooks를 선택했다.

🌿

리액트 훅스가 대세래! 하고 쓰는 것도 아주 틀린말은 아니지만, 내가 이 기술을 왜쓰는가는 늘 쓰기전에 쓰면서도,쓰고난 후에도 고민해 보아야 한다고 생각한다. 확실히 훅스가 대세이고 이제 기존 리액트 작업들은 hooks로 마이그레이션 되고 있는 건 사실이다. 하지만 이유가 타당하다면 클래스를 쓰던 훅스를 쓰던 상관없을 것 같다. (물론 팀에서 훅스를 쓰면 같이써야지)