[React] state의 개념과 useState Hook 사용법

state란 ?

import { useState } from 'react';
 
function Example() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>버튼을 {count}번 눌렀습니다.</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
}

State는 컴포넌트 내부에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.

 

컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

 

state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다.

 

컴포넌트 상태는 시간이 지남에 따라 변경될 수 있고, 변경될 때마다 컴포넌트가 다시 렌더링된다. state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다.

 

State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다.

 

- 사용자 작업 또는 네트워크 변경에 따라 state를 수정할 수 있다
- 객체의 상태가 바뀔 때마다 리액트는 컴포넌트를 브라우저에 다시 렌더링한다 ⭐️
- state 객체는 생성자에서 초기화된다
- state 객체는 여러 속성을 저장할 수 있다
- this.setState()는 state 객체의 값을 저장하는 데 쓰인다
- setState()는 새 state와 이전 state 사이의 얕은 병합을 수행한다

 

※ 참고
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다.
즉 State, Life Cycle 등등 이 없기 떄문에 클래스형 컴포넌트를 사용 했었다. 

리액트 16.8부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 
useState Hook을 사용하여 State 사용이 가능하다.

useState Hook

import { useState } from "react";
 
const App = () => {
    const [value, setValue] = useState(초기값);
    return ...
}

React 라이브러리에 있는 useState()함수를 통해 state를 사용할 수 있다. useState()를 실행시키면 초기값으로 설정해 놓은 state를 기억하고 있다. 이벤트에 의해 setState를 통해 state의 값이 변경되면 변경된 state값에 맞춰 재렌더링 하게 된다.

 

state가 변경되어 재렌더링 하는 과정에서 Virtual DOM이 생성되는데 리액트에서 이전의 Virtual DOM과 다른 부분을 찾아내어 메모리에서 먼저 구현한 후 실제 DOM 부분만 업데이트한다.

 

useState 는 값을 담고 있는 것을 배열의 첫 번째에, 그 값을 set하기 위한 setter 메서드를 배열의 두 번째에 반환한다. 

 

Class Component에서의 state , setState 와 비슷하게, 여기서도 state를 변경해줄 때 직접 접근해서 값을 할당하면 안되고, 반드시 setState라는 setter 메서드를 통해 값을 업데이트해야 한다.

(그래야 React에서 이 컴포넌트의 상태가 변했으니 리랜더링이 필요하다는 것을 인지하고 리랜더링을 진행할 수 있다.)

state를 변경하는 2가지 방법

const [count, setCount] = useState(0);

// 1. setState 내에 변경할 값을 넣기
setCount(count + 1);
 
// 2. setState에 함수를 넣기(권장 ⭐️) 
setCount((current) => {
    return current + 1
})

setState 함수에는 변경할 값을 직접 넣는 방법과 함수를 넣는 방법이 있다.

함수를 넣는 경우 함수가 반환(return)하는 값으로 state가 변경된다.

👉🏻 현재 값을 기반으로 state를 변경하고자 하는 경우 함수를 넣는 방법을 권장 !

 

Object, Array를 갖는 State를 만들 때 주의사항

const [user, setUser] = useState({name: "민수", grade: 1})
 
setUser((current) => {
    current.grade = 2; // 이렇게 하면 안 된다.
    return current;
})

object와 array를 값으로 갖는 state도 만들 수 있다.

 

그러나 예시의 경우 user object 안의 grade가 변경되었지만 user obejct 자체는 변경되지 않았기 때문 React가 State의 변경을 감지하지 못한다.

 

const [user, setUser] = useState({name: '민수', grade: 1 })
 
setUser((current) => {
    const newUser = { ...current }
    newUser.grade = 2
    return newUser
})

따라서 위와 같이 새로운 객체를 만들어서 return 해주면 React가 state의 변경을 감지하고 리렌더링을 해주게 된다.

 

state와 props의 차이점

prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다.

 

props는 (함수 매개변수처럼) 부모 컴포넌트에서 자식 컴포넌트로 전달되는 반면, state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다.

React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다.

 

 

 

(출처 : https://lakelouise.tistory.com/260 , https://medium.com/hcleedev/web-react-hooks%EC%9D%98-%EB%93%B1%EC%9E%A5-%EB%B0%B0%EA%B2%BD%EA%B3%BC-%EC%9D%98%EC%9D%98-d400cbc203a4 )

Web: React Hooks의 등장 배경과 의의

[React] 리액트 State란?