State

State

state는 React에서 정말 많이 쓰이는 문법이다.

state는 변수에 값을 할당해주고, 유동적으로 값을 변환시켜주기 때문에 코드를 동적으로 사용해야할 때 매우 유용하게 쓰인다.

 

이때 하나의 의문점이 들 수 있다.

왜 일반변수를 사용하지 않고 state를 쓰는걸까?

 

그 이유는 동적으로 사용할 수 있는지의 유무에서 온다.

일반변수는 html 코드 안에서 값을 변환할 수 없다. 하지만 state는 일반 변수와 달리 자동으로 값을 변환할 수 있다.

 

const [textValue, setTextValue] = useState("");

state 선언은 이렇게 한다.

 

textValue : state의 값을 가져오게 한다.

setTextValue : state의 값을 바꿔주는 함수 역할을 한다.

코드 내에서 등호를 사용할 수 없기 때문에 setTextValue를 사용해야 한다.

 

예를 들어보면

const [getName, setGetName] = useState("JS");

요렇게 state를 선언했을 때,

현재 state의 값은 "JS" 이다.

이 값을 불러올려면 getName을 사용해야 한다.

 

function App() {

	const [getName, setGetName] = useState("JS");

	return (
    	<div>
        	<div>
            	<h4>블로그</h4>
            </div>
            
            <h4>{ getName }</h4>
        </div>
    )
}

 

{ getName } 을 하게되면 state의 값을 가져오게 되어 "JS"가 쓰이게 된다.

 

 

state를 array 형식으로 지정할 수도 있다.

const [getName, setGetName] = useState(["JS", "HS", "US"]);

이렇게 되어있다면 getName은 

<div>
    <h4>{ getName[0] }</h4>
    <h4>{ getName[1] }</h4>
    <h4>{ getName[2] }</h4>
</div>

이렇게 불러오면 된다.

 

그럼 이제 setGetName 함수를 사용해 state의 값을 바꿔보자.

function App() {

	const [getName, setGetName] = useState("JS");

	return (
    	<div>
        	<div>
            	<h4>블로그</h4>
            </div>
            
            <h4>
            	{ getName } <span onClick{() =>{ setGetName("HJS") }}> 🔄️ </span>
            </h4>
        </div>
    )
}

코드를 해석하자면 

🔄️ 을 클릭하면 onClick 이벤트가 발생되어 내부 함수를 사용하게 되는데, 

이때 setGetName() 함수가 사용되게 되어 함수 내에 적혀있는 "HJS"가 state의 새로운 값이 된다.

참고로 ( ) => { }  이 형식은 함수를 만드는 문법이다.

 

 

그렇다면 마지막으로 하나의 코드 덩어리를 해석해보자.

import React, { useState } from "react";

function Main() {
	const [textValue, setTextValue] = useState("");
    
    return (
    	<div>
        	<input
            	type="text"
                value={textValue}
                onChange{() => setTextValue("안녕")}
                style{{ marginBottom: "8px" }}
        	/>
            <div>{textValue}</div>
        </div>
    );
}

export default Main;

 

 

 

해석 : 

 State는 일반 변수와 달리 html 코드 안에서 자동으로 값이 변환된다.
textValue는 state의 값을 가져오게 하고, setTextValue는 state값을 바꿔주는 함수 역할을 한다. 코드 내부에서 state에 등호를 쓸 수 없기 때문이다. 
 onChange 이벤트 발생 전 input 박스 내 값은 공백이고, 발생 후 setTextValue 함수가 쓰여져 state 값이 “안녕”으로 바뀌게 된다. 따라서 input 박스 내 텍스트와 div 태그의 문구가 바뀌게 된다.

 

참고로 내가 유튜브에서 배웠던 강의자료이다.