State

react.js 에서 state의 사용법을 간략히 정리하는 글이다.

react.js 에서 state는 컴포넌트가 동적으로 가질 수 있는 상태를 말한다.

react 엘리먼트를 반환하는 함수형 컴포넌트에서 특정 상태 값을 실시간으로 변경하기 위해 useState 라는 React Hook을 사용할 수 있다.  

import React, {useState} from 'react';

const Counter = () => {
    
    console.log("counter 호출"); // count의 상태(값)이 바뀔때마다 console에서 호출되는것을 확인할 수 있다. 
    const [count, setCount] = useState(0);
    const onIncrease= () => {
        setCount(count + 1);
    }
    
    const onDecrease= () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
} 
export default Counter;

위 예시는 + 버튼과 -버튼을 클릭하여 현재 표출되는 있는 값을 동적으로 1씩 증가하거나 감소시키는 counter 예제이다.

 

1. import useState 

import React, {useState} from 'react'; //react Hooks useState import

우선 상태를 관리하기 위해 react 에서 useState를 import 한다. 

 

2. state 변수선언

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

state 사용하기 위해 위와 같이 변수선언을 한다. setCount에 상태값을 전달하면 count에서 실제로 전달받은 값으로 상태가 변경되는 원리이이다. useState 에 0을 넣어주었는데 여기서 0은 count의 초기값을 의미한다.

 

3. 상태변경

const onIncrease= () => {
    setCount(count + 1);
}
    
const onDecrease= () => {
    setCount(count - 1);
}

return (
    <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
    </div>
)

위 코드에서 onIncrease 와 onDecrease 함수를 클릭했을때의 이벤트로 전달하여 + 버튼을 클릭하였을때는 현재 count 값에 1을 더한 상태값을, - 버튼을 클릭하였을때는 현재 count 값에 1을 감소한 상태값을 setCount를 사용하여 변경한다. 컴포넌트의 상태가 바뀌게되면 해당 컴포넌트를 다시 호출하여 렌더링을 하게 되는데 이것을 리렌더링(re-rendering)이라고 한다.