[React.js] Hooks - useState .04

오늘부터 작성할 내용은 React Hook입니다. 클래스형에서 함수형 컴포넌트으로 작성할 것을 권장하면서 등장한 아이들 입니다. 그 중 가장 중요하면서 많이 사용하는 useState에 대해서 알아보고자 합니다.

 

---

 

🤔 useState?

state를 만들고 관리하기 위해 도움을 주는 Hook입니다. 로그인 상태를 관리하거나, 아이템들을 관리하는 등의 여러가지 상태를 관리할 수 있습니다. 말보단 직접 보고 만들어 보는게 제일 좋으니 바로 코드를 보시죠!

const [state, setState] = useState(defaultState);

위 코드블럭이 useState의 기본 코드입니다. useState는 두 개의 값을 return 해줍니다. 구조분해할당 문법으로 state와 setState에 각각 리턴된 값이 순서대로 반영됩니다.

변수 state에는 값이 저장(기록)되며, setState는 함수로 해당 함수를 통해 state의 값을 변경할 수 있습니다. Java에 있는 Setter와 Getter와 비슷하게 작동한다고 생각하면 이해가 쉬울꺼 같네요. useState의 괄호 안에는 기본 값(초기 값)을 담습니다. defaultState에 담긴 값은 state가 기본적으로 가지는 값이 됩니다. 0을 넣으면 state는 0을 가지게 됩니다.

 

📝  useState를 사용해봅시다.

React 공식 홈페이지에 있는 예제를 한번 볼까요?

버튼을 누르면 몇번을 눌렀는지 보여주는 예제입니다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다. 기본 값은 0 입니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Example 작동

시작 값은 우리가 넣어준 기본 값 0 이며, 버튼 Click me를 누르면 count 횟수가 올라가는게 보이죠?

(사진에서는 6회를 누르는데 이건 촬영 프로그램 때문에 그렇습니다.)

button의 onClick 이벤트에 담긴 함수가 동작하여 현재 count값에 1을 더하여 count에 반영해줍니다.

setState(=setCount)가 동작하면 React는 수정된 부분만 새로 렌더링을 하게됩니다. 이전에 말했던 Virtual Dom 덕분이죠.

count 값이 수정 되었기 때문에 해당 하는 부분인 <p>는 새롭게 렌더링 됩니다. 그리고 사진과 같이 실시간으로 변경 되어 보여집니다.

숫자 값외에도 문자열, 논리, 객체, 배열 등 어떤 값도 가능합니다.

 

🤨 왜 onClick 이벤트에 setCount를 화살표 함수로 감싸주었나요?

제가 공부할 때 이해가 잘 되지 않았던 부분입니다. 왜 화살표 함수로 감싸주는거지?

감싸지 않고 한번 실행해보세요! 어떻게 되나요?

헷갈리는 요소를 짚고 간다면, HTML과 바닐라 JS에서 onclick과 혼동이 오는 것입니다.

아래 영상이 좋은 참조가 될 거라고 생각합니다.

youtu.be/riVFM9YnYck

 

 참조.

Using the State Hook – React