React - State란?

1. 개요

현재 리액트를 배우고 있는데 가장 기본이면서 중요한 개념인 state에 대해 개념이 잘 잡히지 않아서 기록할려고 적어본다. 내가 아는 선에서 정리한 것이므로 틀린부분이 존재할 수 있다. 

개념을 배워가면서 수정하면서 기록할 예정이다.

 

2. 사용 방법

import { useState } from "react";

state를 사용하기 전에 먼저 리액트로부터 모듈을 import 해야 한다.

const [state,setState] = useState(초기값)

state : 현재 상태 

setState : 현재 상태를 변화시키는 함수

useState : state의 초기값

 

3. 사용 예시

import { useState } from "react";

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

return (
	<div>
    	<input value = {state}>
    </div>
)

input란에 어떠한 값을 써도 빈 공백으로 나온다. 그 이유는 state상태변화가 일어나지 않기 때문이다. 

상태 변화를 주기 위해서는 setState함수를 사용해서 상태를 변화시켜줘야 한다. 

 

import { useState } from "react";

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

return (
	<div>
    	<input value = {state} 
        onChange = {(e) => {
        	setState(e.target.value);
            }}>
    </div>
)

이렇게 변경하게 해준다면 input의 값이 제대로 변화하는 것을 확인 할 수 있다.