[React] 리액트 훅에 대한 이해 - useState 활용해보기

이번에 진행한 토이프로젝트 내용을 좀 더 자세히 정리하려고 한다.

자바스크립트도 모르는 입장에서 바라본 리액트 훅은 정말 충격적인 기능이었다.

웹 개발에서 이렇게 함수형 프로그래밍이 가능한 줄 몰랐다.

 

근데 원래 자바스크립트가 웹에서 함수형 프로그래밍을 지원해주는 언어인걸로 알고있어서

내가 자바스크립트의 활용도에 놀란건지 정말 리액트 훅의 차별성을 이해하고 놀란건지는 모르겠다.

 

그동안은 웹 개발이라고 해 본 것이 너무 디테일하고 정적이라 재미가 없었는데,

리액트를 접하고나서 많은 재미를 느꼇다.

 

 

먼저 리액트가 왜 좋은가 왜 다들 사용하는 지

책을 공부해서 이해한 내용을 정리하자면

기존 리액트 버전 16.8 이전에는 사용자 컴포넌트는 클래스 기반의 컴포넌트였다.

잘 모르겠지만 클래스 기반의 컴포넌트는 재사용성도 떨어지고, 굉장히 복잡하고 모호하다고 한다.

 

하지만 훅을 활용해 함수형으로 컴포넌트를 구현하면 위 단점을 극복해준다.

https://youtu.be/yS-BU6eYUDE

위 영상을 보면 그 차이점을 알기 쉽게 설명 해준다. 

 

 

이제 많이 사용하는 리액트 훅 중 하나인 useState를 활용해

토이프로젝트에 적용한 내용을 정리하려고 한다.

 

책에 따르면

useState의 사용법은 다음과 같다.

const [값, 값을 변경하는 세터함수] = useState(초깃값)

세터 함수가 호출되면 리액트 프레임워크는 컴포넌트의 상태에 변화가 있는 것으로 판단하고,

해당 컴포넌트를 재랜더링하는 방식이라고 한다. 

 

또 이 '상태'라는 것에 타입이 존재하는데, 원시타입(int, string 등등) 일수도 있고, 

객체, 배열, 튜플 이런 타입일 수도 있다.

결국 useState는 초깃값 앞에 타입을 명시해주는 제네릭 타입의 함수이다.

 

그래서 나는 이를 활용해서 프로젝트에 다음과 같이 적용했다.

jsx를 이용해 위와 같은 폼을 만들고,

각 input박스에 사용자가 값을 입력하면 그 값을 가져와 연산할 수 있도록 하는

useState를 설계했다.

useState 선언부

 

입력 포맷에 맞게 성별, 몸무게, 주류, 잔, 잔 수 타입을 초기화 해주었다.

useState 상태 타입은 FormType이라는 커스텀 타입을 만들어 지정해줬다.

 

FormType 선언부

이 책을 통해 리액트를 배울 때, Typescript를 사용했기 때문에

각 요소들에 대해 타입명을 지정했다. (아마도)

 

 

위와 같이 선언한 후

사용자가 입력하는 이벤트가 발생하면 값을 리랜더링 하면서 계속 변경해주었는데,

다음과 같이 구현했다.

상태변화에 따른 콜백함수들

구현부 코드 중 일부를 캡쳐했는데, 

다음과 같이 setForm 세터함수를 호출해서 현재 이벤트가 발생한 곳의 관련된 변수와 상관없는 부분은

전개연산자(...)를 이용해 덮어씌워주고,

이벤트와 관련된 변수는 값을 변경해준다.

 

setForm 이외에도 setData나 setResult같은 다른 세터함수는

데이터를 추출해 연산하기 위해 임의로 또 만든 useState의 세터함수이다.

 

이렇게 사용자의 정보를 입력받아

"결과보기" 라는 버튼을 클릭하게 되면,

사용자가 입력한 데이터를 실시간으로 input박스에 반영하게 된다.

위와 같이 Submit 이벤트를 캐치해서 

setResult라는 세터함수를 호출하여 값을 변경시켜 준다.

 

이렇게 계산한 다음

아래에서 다음과 같이

계산 결과에 따라 간단하게 사용자에게 제공할 정보를 업데이트해준다.

 

사용자가 입력한 정보에 따른 결과창

위와같이 혈중 알코올농도, 예상 해독시간이 계산되었고,

결과에 따라 사용자에게 제공할 이미지, 텍스트가 결정되어 보여지고 있다.

 

이렇게 useState를 이용하면,

마치 함수형 프로그래밍을 하듯이 컴포넌트를 핸들링하여

웹 개발이 가능하다.

 

DB, 서버 등 과 결합하면 매우 시너지효과가 좋을 것 같다.

실제로 이런 실시간성때문에 리액트를 SNS 개발에 많이 사용한다고 한다.

 

아주 기초적인 useState활용 방안에 대해 

직접 진행했던 프로젝트를 예시로 알아보았다.