[TIL] React Hook 1. useState

React logo

1. useState

◎ 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 사용하는 함수가 useState이다.

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 

useState라는 함수는 리액트의 Hoooks 중 하나이다.

※ Hook은 클래스 안에서 동작하지 않는다.

2. 예시

◎ 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 구현해보자.

 

Counter.js

그다음엔 App에서 Counter를 렌더링 해보자.

 

App.js

browser

2. 이벤트 설정

◎ Counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정을 해보자.

Counter 컴포넌트를 다음 코드와 같이 수정해보자.

 

Counter.js

onIncrease와 onDecrease는 화살표 함수를 사용하여 구현하였다.

함수를 만들고, button의 onClick으로 각 함수를 연결해주었다.

리액트에서 엘리먼트에 이벤트를 설정해줄 때에는 아래의 형태로 설정해주어야 한다.

on이벤트이름={실행하고 싶은 함수}

 

주의할 점은, 함수 형태를 넣어주어야 하지, 함수를 다음과 같이 실행하시면 안 된다.

// Bad
onClick={onIncrease()}
onClick={onDecrease()}

이렇게 하면 렌더링 되는 시점에서 함수가 호출되버린다.

위의 코드처럼 했을 때, 페이지를 키는 동시에 콘솔이 바로 출력되는 현상을 발견할 수 있다.

 

잘못된 예시

이벤트 설정할 때에는 함수 타입의 값을 넣어주어야 한다.

다시 코드를 수정하고 버튼을 눌러서 콘솔에 메시지들이 잘 출력되는지 확인해보자.

 

잘된 예시

3. useState 함수를 이용하여 동적으로 바꾸기

◎ 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에 useState라는 함수가 있는데, 이 함수를 사용하면 컴포넌트에서 상태를 관리할 수 있다.

Counter 컴포넌트를 useStae 함수를 사용하여 동적으로 값을 바꿔보자.

먼저 리액트 패키지에서 useState 함수를 불러와야 한다.

import React, { useState } from 'react;

Counter.js

이제 코드 하나하나 살펴보자.

const [number, setNumber] = useState(0);

useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출한다.(위의 코드에서는 기본값이 0으로 설정한 거다.)

이 함수를 호출해주면 배열이 반환되는데, 여기서 첫 번째 원소는 현재 상태, 두 번째 원소는 Setter함수이다.(변화는 상태)

 

• useState를 호출하는 것은 무엇을 하는 걸까? "state 변수"를 선언할 수 있다. 위에 선언한 변수는 count라고 부르지만 apple처럼 아무 이름으로 지어도 된다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않는다.

• useState의 인자로 무엇을 넘겨주어야 할까? useState() Hook의 인자로 넘겨주는 값은 state의 초기 값이다. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자, 문자 타입을 가질 수 있다.(2개의 다른 변수를 저장하기를 원하면 useState()를 두 번 호출해야 한다.)

• useState는 무엇을 반환할까? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다. this.state.count와 this.setState와 유사하다.

const onIncrease = () => {
 setNumber(number + 1);
}

const onDecrease = () => {
 setNumber(number - 1);
}

Setter 함수는 파라미터로 전달받은 값을 최신 상태로 설정해준다.

onIncrease 함수는 number가 +1 씩 증가하여야 하니까  number(현재 상태) + 1,

onDecrease 함수는 number가 -1 씩 감소하여야 하니까 number(현재 상태) - 1

<h1>{number}</h1>

h1 태그에서 이제 정적인 값이 아닌  {number} 값을 보여주어야 한다.

한번 버튼을 눌러서. 숫자가 잘 바뀌고 있는지 확인해보자.

 

browser

0에서 시작해서 증가 버튼 2번 클릭하면 number가 2로 변경 후, 감소 버튼 1번 클릭하면 number은 1이 되는 걸 확인할 수 있다.

4. 함수형 업데이트

◎ 위의 코드를 보면 Setter 함수를 사용할 때, 업데이트하고 싶은 새로운 값을 파라미터로 넣어주고 있는데, 그 대신에 기존 값을 어떻게 업데이트할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다.

Counter 컴포넌트를 다음과 같이 수정해보자.

 

Counter.js

onIncrease와 onDecrease에서 setNumber를 사용할 때 그다음 상태를 파라미터로 넣어준 것이 아니라, 값을 업데이트하는 함수를 파라미터로 넣어주었다.

함수형 업데이트는 주로 나중에 컴포넌트를 최적화를 하게 될 때 사용한다.

위의 코드를 실행해보면 잘 동작하는 걸 확인할 수 있다.

※ 참조

- '벨로퍼트와 함께 하는 모던 리액트' 강의 정리

 

https://ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React