동적인 값을 할당하기 위한 변수, useState

리액트 16.8 버전 이전에서는 함수형 컴포넌트에서 상태 관리를 할 수가 없었음. (컨버팅 하는 사람도 보았다..) 하지만 16.8 버전 부터 Hooks 라는 기능이 도입되며 함수형 컴포넌트에서 상태를 관리할 수 있게 되었다.!

​

※ Hook : 함수 컴포넌트에서 React state (리액트에서 아주 중요한 개념 중 하나) 와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수.

※ 상태관리(State Management) : 데이터를 관리하는 방법. 여러 component 간에 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것을 의미.

​

리액트로 개발을 하다보면 usestate 를 적절한 위치에서 선언하고, 잘 내려주고(상속) 꼬이지 않도록 관리하는 것이 고오급 스킬이라는 것을 깨닫게 된다. 어떻게 보면 변수 선언 만큼이나 잘 사용되며, 중요한 개념이라 1번째로 넣게 되었다.

 

사용방법

import React, { useState } from 'react';
// react Hook 인 usestate를 사용하겠다.

function Counter() {
  const [number, setNumber] = useState(0);
// 동적으로 DOM을 변경 시켜줄 변수 number 선언
// usestate 는 쉽게 말하여 get, set 형식으로 셋트로 선언해야 함.

  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;

 

1. 리액트 패키지에서 useState를 불러온다.

2. 상태의 기본값을 집어 넣어 호출해줌. get, set 형식. 첫번째 원소는 현재 상태. 두번째 원소는 setter 함수.

3. 원하는 곳에서 적절하게 사용해준다.

 

예제

 

 

 

왜 React에서 DOM에 변화를 주려면 변수를 Usestate로 선언해야 하는걸까?

 

리액트 컴포넌트는 mount-unmount-didmount 형식의 생명 주기가 이루어진다.

여기서 세부적으로 들어가게 되면, mount 상태에서 한번 렌더링을 실행하고, 후에는 update 상태에 진입하여 shouldComponentUpdate === true 일 때만 렌더링을 실행하게 된다.

 

따라서 변경된 변수가 화면에 적용되려면

1. state 혹은 props에 변환이 일어나야함

2. 부모 컴포넌트가 렌더링 시켜야함

3. forceUpdate 를 사용해야함.

세가지 중에 하나를 선택해야 하는 상황이 발생하게 되는 것이다.

​

한줄 요약하자면, 리액트 생명주기 상 특성 때문에 변수를 변경하더라도 내부의 값은 변환되지만 DOM 상, 화면 상의 값은 화면 리렌더링이 일어나지 않았기 때문에 변경되지 않는 것.

 

언제 사용하면 좋을까?

① 상태 값이 불규칙할 때

const [testDate, setTestData] = useState();

 

위와 같은 형태로 선언이 가능하기에, 사용자 입력값이 불규칙하거나 예측 불가한 데이터를 받을 때 사용하면 유용하다.

​

② 상태 관리가 필요할 때.

 

③ DOM 변화를 일으키는 변수를 선언할 때.

- DOM 변화를 일으키지 않는 변수의 경우 일반 변수 const, var, let 으로 선언하는 것이 안정적.

 

 

+)

리액트에서 제공하는 공식 hook 이니 안정성에 대해서는 믿고 사용하여도 된다.

 

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 

궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.