React- useState 를 통해 컴포넌트에서 바뀌는 값 관리하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

useState 를 통해 컴포넌트에서 바뀌는 값 관리

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데

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

useState 라는 함수를 사용하면 컴포넌트에서 바뀌는 값을 관리할 수 있다. ( useState가 리액트의 Hooks 중 하나 )

 

아래에서 버튼을 누르면 숫자가 바뀌는 카운터를 만들면서 userState의 사용법을 정리 하겠다.

 

1. UI 생성

 

Counter.js ( 파일명 )

 

import React from 'react';

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

export default Counter;

먼저 이렇게 코드를 작성한 후 Counter.js 파일은 만든다.

 

 

App.js ( 파일명 )

 

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

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

export default App;

그 다음엔 App.js에서 Counter 컴포넌트를 렌더링 한다.

 

실행 결과

 

2. 이벤트 설정

 

counter.js

import React from 'react';

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

export default Counter;

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

리액트에서 엘리먼트에 이벤트를 설정해줄때에는 on이벤트이름={실행하고싶은함수명} 형태로 설정해주어야 한다.

주의할 점은 함수명() 형태로 넣어주면 안된다. 왜냐하면 렌더링 하는 시점에 함수가 호출되어 버리기 때문이다. 

 

브라우저의 개발자 도구 콘솔창에서 버튼을 눌렀을때 +1 -1이 출력이 된다면 이벤트 설정이 잘된 것이다.

 

 

3. userState로 동적인 관리 하기

컴포넌트에서 동적인 값을 상태(state)라고 부르는데 리액트의 userState 함수를 사용하면

컴포넌트에서 상태를 관리 할 수 있다.

Counter 컴포넌트를 아래와 같이 수정하면 된다.

 

counter.js

 

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-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 onDecrease = () => {
    setNumber(number - 1);
  }

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

 

 <h1>{number}</h1>

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

 

실행 결과