React hooks (리액트 훅) 사용 방법 시리즈(1) - useState

단편 시리즈처럼 React hooks API 의 사용법에 대해서 기록해볼 예정입니다.

React Hooks 의 자세한 개요는 공식 홈페이지에서 확인할 수 있습니다.

useState

state 를 편하게 관리할 수 있는 가장 기본적인 API 입니다.
아마 useState 는 React hooks API 중에서 가장 많이 사용되는 혹은 가장 많이 사용될 API 가 아닐까 싶네요.

기존엔 state 를 사용하려면 다음과 같이 코드를 작성해야 했습니다.

 

 

클래스 기반의 컴포넌트를 작성하고 그 안에서 state 를 선언하고 관리하는 방식이었습니다.

이러한 방식의 단점은 관리할 state 가 많아지면 코드의 가독성이 떨어지는 문제가 있었습니다.

그리고 redux, mobx 와 같은 스토어 중심의 상태 관리 시스템이 등장하면서 state 를 사용하는 일이 크게 줄어들었습니다.

그래서 React hooks API 가 등장하기 전까지는 state 는 이제 레거시와 같은 느낌의 날 것으로 남아있는 그런 느낌도 들었으니까요.

React hooks 가 등장한 좀 더 구체적이고 명확한 이유는 공식 홈페이지에서 업로드한 영상에서 확인하실 수 있습니다.

어쨌든, useState 를 사용하면 어떤 코드가 되는지부터 살펴보겠습니다.

 

 

보기에는 크게 다를게 없어보이지만 다음과 같은 차이점이 존재합니다.

 

클래스 기반에서 함수형 기반으로

React hooks API 는 클래스형 컴포넌트에서 사용할 수 없습니다.
이런 배경이 되는 이유는 왜 React hooks 가 등장했는지를 알아야하는데요.
공식 홈페이지의 리액트 소개글에는 이런 문구가 있습니다.

 

We’ve found that classes can be a large barrier to learning React.
...
The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.

저희 개발팀은 클래스가 리액트를 배우는데에 큰 장벽이 될 수 있다는 점을 느꼈습니다.
...
React 에서 함수형과 클래스형 컴포넌트를 두고 언제 어떤걸 사용해야하는지에 대한 의견은 리액트를 오랫동안 사용한 전문가들 사이에서도 의견이 분분합니다.

 

위 글만 보더라도 React 측에서도 함수형 컴포넌트를 그다지 선호하지 않는다는 점을 미뤄 짐작할 수 있습니다.
개인적으로는 자바스크립트에서 초심자에게 가장 이해하기 어려운 난해한 개념들이 바로 프로토타입과 this, 클로져 라고 생각하는데 React 측에서도 이러한 점을 어느정도 수긍하고 있고, 리액트를 사용하는 개발자들이 반드시 자바스크립트에 익숙한 개발자라는 보장이 없다는 점을 전제로 한 패치방향이라고 볼 수 있을 듯 합니다.

state 업데이트 방식

기존의 클래스 컴포넌트 방식에선 state 를 업데이트하기 위해선 setState 메소드를 사용해 state 를 업데이트 할 수 있었습니다.
새롭게 도입된 React hooks 에선 useState 메소드를 사용할 수 있습니다.
사용 규칙은 아주 간단합니다.

 

예를 들어서 state 로 사용하고 싶은 변수명이 count 라면, setState 역할을 할 메소드는 state 변수명 앞에 set 을 붙이고 카멜케이스 기법에 따라 네이밍을 처리하면 됩니다. 즉, setCount 가 되겠죠.
그리고 count, setCount 는 대괄호로 감싸줍니다.
useState 에 전달할 파라미터 값으로는 state 변수를 초기화하고 싶은 값을 넣으면 됩니다.
딱히 초기화하고 싶지 않다면 null 을 넣어주어도 무난합니다.

앞서 설명한 방식을 적용한다면, 이런 식으로 사용할 수 있을 겁니다.
const [count, setCount] = useState(0);
초기화 할 값은 0 으로 지정해주었고, 네이밍은 카멜케이스에 맞게 정해주었습니다.

state 값을 업데이트할 땐 아주 간단합니다.
setCount 메소드를 호출하고 그 안에 값을 넣기만하면 끝입니다.
자동으로 count 가 업데이트가 될 것이고, this 를 사용할 필요도, this bounding 에 대한 고민 또한 전혀 필요 없습니다.
왜냐면 함수형 컴포넌트이기 때문이죠!

 

컴포넌트 지옥 탈출

React 로 개발을 하다보면, 이러한 고민에 종종 빠집니다.
"이 컴포넌트 보기가 좀 싫은데.. 분리시켜야하나?"

예시를 한 번 들어보겠습니다.

 

 

컴포넌트를 뭔가 조금 더 깔끔하게 하고 싶었는데, componentDidMount 등과 같은 생명주기 메소드를 사용해야했기 때문에 클래스형 컴포넌트 사용이 강제될 수 밖에 없었고 결국 컴포넌트를 하나 더 만들어서 함수형 컴포넌트로 작성했습니다.
아마 React 를 사용하시는 대부분의 분들이 이런 비슷한 경험을 했거나 고민을 한 적이 있을거라고 생각합니다.
실제로 운영중인 프로젝트에선 그 깊이가 상당히 깊을 수도 있겠네요.

React hooks API 는 기본적으로 이러한 고민을 없애고자(줄이고자) 함수형 컴포넌트 기반에서 컴파일되도록 설계된 메소드들입니다.
그래서 함수형 컴포넌트 기반으로 깔끔하게 작성할 수 있습니다.

 

예제 코드

예제 코드를 아래에 첨부하겠습니다.

 

두 개의 다른 버전에서 동작하는 모습을 확인해보세요.
이렇게 React hooks 에 추가된 메소드 중 하나인 useState 에 대해서 알아봤습니다.
다음엔 다른 메소드를 기록해볼 예정입니다.

 

참고가 되었으면 좋겠습니다 :D