React 집중 #4

CoderS·2021년 12월 9일

JavaScript React 코딩

리액트 Remind

목록 보기

4/32

#4 드디어 시작! ㄷㄷㄷ!

useState를 이용한 컴포넌트 값 바꾸기

지금까지 공부하면서 동적인 부분은 하나도 없었다.

과거에는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, 리액트 16.8에서 Hooks라는 기능이 도입되면서 새로운 패러다임을 보여주었다.

useState 또한 리액트의 Hooks 하나의 기능이다.

우선 가장한 예를 들어보겠다.

src 디렉토리에 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 파일에 Counter를 렌더링한다.

App.js

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

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

export default App;

그러면 화면은 나왔으니, 동적인 부분을 책임지는 이벤트를 설정할 것 이다.

다음과 같이 Counter를 수정해본다.

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;

여기서 함수 onIncrease와 onDecrease는 각각 콘솔로그에 +1과 -1이 출력될 수 있도록 설정을 해두었다.

그리고 button 태그에 onClick 이벤트를 연결시킨다.

여기서 만약...

onClick={onIncrease()}

위에처럼 함수호출식으로 설정해두면 렌더링할 때 실행해버리니까 아무리 버튼 태그를 클릭을해도 콘솔에는 찍히지않는다.

그래서 올바른 방식으로 함수 값만 출력시킨다.

결과는...

잘 출력이되는 모습을 볼 수 있다.

자! 그러면 이번에는 리액트 useState 함수를 사용해서 컴포넌트 상태를 관리해보겠다.

다음과 같이 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;

useState를 불러올려면 리액트 패키지에서 밑에처럼 작성해주면된다.

import React, { useState } from 'react';

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

useState를 사용할 때는 상태 기본값을 파라미터로 넣어주면된다. 이 함수를 호출하면 배열이 반환이되는데, 여기서 첫 번째 값은 바뀌는 상태 값이고 두 번째는 setter라는 함수이다.

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

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

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

우리는 이 때, h1 태그에 0이 아닌 {number}라는 값을 렌더링해준다.

결과는...

+1을 클릭해서 3으로 만들어줬다.

이번에는 Setter 함수를 조금 다른 방식으로 값을 업데이트하도록 만들어보겠다.

Counter 파일을 조금만 수정하면...

Counter.js

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

export default Counter;

바뀐부분...

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

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

setter 함수에 다음 상태를 파라미터로 넣어준것이 아니라, 콜백함수를 이용해서 값을 업데이트 하는 함수를 파라미터로 넣어봤다.

결과는...