surf react : hook - 1

Dino_·2021년 7월 23일
0

surf react

목록 보기
6/9
post-thumbnail

🔔 Goal

  • react hook을 이해한다.

🌳 hook

React 버전 16.8부터 React 요소로 새로 추가된 API이다.

Hook은 functional component에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것이다.

🍃 hook의 특징

  • 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. (이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않는다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하면 된다.)

class component를 제거할 계획이 없다.

  • 이전 버전과의 호환성을 깨뜨리지 않는다.

  • props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공한다. 또한, Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공한다.

🍃 개발 동기

Hook은 React로 컴포넌트를 작성하고 유지하는 동안 부딫혔던 수 많은 문제들을 해결했다.

React를 배우는 중이든, 매일 사용하든, 심지어 비슷한 컴포넌트 모델과 함께 다른 라이브러리를 선호하든지 간에, 사용자는 이러한 문제를 인식해 왔다.

1. 상태 로직을 재사용 문제
React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않는다. (예를 들어, 스토어에 연결하는 것)

만약 이전부터 React를 사용해왔다면, render props고차 컴포넌트(HOC)와 같은 패턴을 통해 이러한 문제를 해결하는 벙법에 익숙할 것이다.

그러나 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 만든다.

React 개발자 도구에서 React 애플리케이션을 본다면, providers, consumers, 고차 컴포넌트, render props 그리고 다른 추상화에 대한 레이어로 둘러싸인 “래퍼 지옥(wrapper hell)“을 볼 가능성이 높다.

React는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요했다.

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 이를 이용해 독립적인 테스트와 재사용이 가능하게 된다.

Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와주며 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어준다.

비대해지는 컴포넌트의 유지보수 문제

간단하게 시작했지만 관리하기가 힘들어지는 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지보수해야 한다.

각 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가곤 한다.

예시로 componentDidMountcomponentDidUpdate는 컴포넌트안에서 데이터를 가져오는 작업을 수행할 때 사용 되어야 하지만, 같은 componentDidMount에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 하며, componentWillUnmount에서 cleanup 로직을 수행하기도 한다.

함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합한다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해치게 된다.

위와 같은 예시에서, 상태 관련 로직은 한 공간안에 묶여 있기 때문에 이런 컴포넌트들을 작게 분리하는 것은 불가능하며 테스트하기도 어렵다.

이 때문에 많은 사용자들은 React를 별도의 상태 관리 라이브러리와 함께 결합해서 사용해왔다. 그러나, 이런 상태 관리 라이브러리는 종종 너무 많은 추상화를 하고, 서로 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱더 어렵게 만들었다.

이같은 문제를 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는 것 보다는, Hook을 통해 서로 비슷한 작업을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. (구독 설정 및 데이터를 불러오는 것과 같은 로직)

또한 이러한 로직의 추적을 쉽게 할 수 있도록 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.

이에 대해 Effect Hook에서 더 알아볼 것이다.

Class의 this 문제

React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 한다.

JavaScript의 this키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만들곤 했다.

또한 class의 사용을 위해 이벤트 핸들러가 등록되는 방법을 정확히 파악해야 했으며, 이는 불안정한 문법 제안들의 도움이 없을 시엔, 코드를 매우 장황하게 만든다.

사용자들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 하고도, Class의 이해에는 어려움을 겪는다.

React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등은 숙련된 React 개발자 사이에서도 의견이 분분하다고 한다.

Class는 최근 사용되는 도구에서도 많은 문제를 일으킨다. 예를 들어 Class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만들었다.

이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시한다.

🍃 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.

최상위(at the top level)에서만 Hook을 호출해야 한다.

React 함수 컴포넌트 내에서만 Hook을 호출해야 해라.

일반 JavaScript 함수에서는 Hook을 호출해서는 안 된다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있다. 바로 직접 작성한 custom Hook 내)

이 규칙들을 강제하기 위해서 linter plugin을 제공하고 있다.

🌳 Reference

profile
호기심 많은 청년

0개의 댓글