[React] state

1. 정의

리액트에서 값에 대한 변경으로 반영된 상태(state)를 유저에게 제공하는 기능이다.

또한, props와 달리 state는 한 컴포넌트 안에서 이루어진다.

 

 

 

2. 사용

import React, { useState } from 'react';

const Sample = () => {
    /**
    * const로 선언했음에도 상태 변경이 가능한 이유는 useState가 가진 클로저의 특성이 있어서 가능하다.
    * 자세한 내용은 해당 블로그(https://dudghsx.tistory.com/18) 참조
    */
    const [num, setNum] = useState(0); // state(num)와 setState(setNum) 선언 및 useState 인자에 0으로 초기값 설정

    // 클릭 이벤트를 통해 setState를 수정한다  
    const onClick = (event) => {
    	setNum(num+1);
    }
   
    return  (
    	{/* state를 호출하여 상태값을 렌더링 한다 */}
    	<h1>{ num }</h1>
        {/* 클릭 이벤트를 통해 상태값이 변경되게끔 한다 */}
    	<button onClick={onClick}>Counter</button>
    );
}

export default Sample;

 

또한, 같은 종류의 이벤트가 한 컴포넌트 내에 여러개가 있을때 key : value의 형태로 일괄적인 관리가 가능하다.

import React, { useState } from 'react';

const Sample = () => {
    const [id, setId] = useState("");
    const [pw, setPw] = useState("");
    
    const onChange = (event) => {
    	// 체인지 이벤트에서 key : value를 통해 여러 값들을 일괄적으로 관리한다
    	const {
          target: { name, value },
        } = event;
        // 해당 value가 특정 변수와 타입이 맞는지 유효성 검사를 통해 state를 관리한다
        if (name === "id") {
          setId(value);
        } else if (name === "pw") {
          setPw(value);
        }
    }
   
    return  (
        {/* 서로 다른 값이지만 이벤트의 종류가 같은 것을 알 수 있다 */}
    	<input name="id" type="text" value={id} onChange={onChange} required />
        <input name="id" type="password" value={pw} onChange={onChange} required />
    );
}

export default Sample;

 

---

리액트의 공식문서에는 setState()에 대한 세 가지 주의 사항이 있다.

 

직접 state를 수정하지 말 것.

// state를 유일하게 지정할 수 있는 라인이다.
const [hello, setHello] = useState("");

// 한 번 state를 지정하면 이후 직접 수정할 수 없다(컴포넌트를 다시 렌더링 하지 않기 때문...)
hello = "HELLO"; // (X)

// setState의 인자를 통해 값을 수정할 수 있다
setHello("HELLO"); // (O)

 

state 업데이트가 비동기적으로 업데이트 될 수도 있다.

const [counter, setCounter] = useState(0);

// props와 state가 비동기 업데이트 되는 것을 감안해 다음 state를 계산할 때 해당 값에 의존해서는 안된다
setCounter(counter + props.increment); // (X)

// setState 인자 내에 함수를 이용하는 다른 형태로 사용한다
setCounter((counter, props) => { counter + props.increment }); // (O)

 

state는 병합된다.

const [post, setPost] = useState("");
const [comments, setComments] = useState("");

// setState를 호출할 때 리액트는 제공한 객체를 현재 state로 병합(merged)한다
// 다만, 별도의 setState 호출로 변수를 독립적으로 업데이트 할 수 있다
componentDidMount() {
    fetchPosts().then(response => {
        setPost(response.posts);
    });

    fetchComments().then(response => {
        setComments(response.comments);
    });
}

---