(react) useState를 통해 컴포넌트에서 바뀌는 값 관리하기

호두파파·2021년 4월 5일

React

목록 보기

2/39

해당 글은 벨로퍼트의 모던 자바스크립트에서 발췌한 글입니다.
원문보기

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
이번에는 useState라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나이다.

정말 진부한 예제 중 하나인, 버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트를 만들어보자.

Counter.js

import React from 'react';

function Counter() {
  return (
      <div>
        <h1>0</h1>
  		<button>+1</button>
  	    <button>-1</button>
      </div>
  );
}

export default Counter;

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}
export default App;

이벤트 설정

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

Counter.js

function Counter() {
  const onIncrease = () => {
    console.log('+1');
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
 	  <h1>0</h1>
      <button>+1</button>
 	  <button>-1</button>
    </div>
  );
}

export default Counter;

여기서 onCrease와 onDecrease는 화살표 함수를 사용해 구현을 해주었다.
함수를 만들고, button의 onClick으로 각 함수를 연결해주었다. 리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고 싶은 함수}형태로 설정해주어야 한다.

여기서 주의해야할 점은 함수형태를 넣어주어야 하지, 함수를 다음과 같이 실행하면 안된다는 것이다.

onClick={onIncrease()}

이렇게 하면 랜더링되는 시점에서 함수가 호출되버리기 때문이다. 이벤트를 설정할때에는 함수타입의 값을 넣어주어야 한다. 매우중요!!

동적인 값 끼 얹기, useState

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

Counter

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);
  
  const onIncrease = () => {
    console.log('+1');
  }
  
  const onDecrease = () => {
    console.log('-1');
  }
  
  return (
    <div>
 	  <h1>0</h1>
      <button>+1</button>
 	  <button>-1</button>
    </div>
  );
}

export default Counter;

import React, { useState } from 'react';

아래 코드는 리액트 패키지에서 useState라는 함수를 불러와준다.

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

useState를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수이다.

위 원리를 코드로 나타내면 다음과 같다.

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

배열 비구조화 할당을 통해 각 원소를 추출해준 것이다.

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

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

<h1>{number}</h1>

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

함수형 업데이트

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

Counter

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);
  
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }
  
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }
  
  return (
    <div>
 	  <h1>{number}</h1>
      <button>+1</button>
 	  <button>-1</button>
    </div>
  );
}

export default Counter;