⚛️React/⚡ver.1
⚛️Start! React : section07 - state,useState
4:Bee
2024. 1. 15. 19:15
728x90
React Hook API중 상태를 관리하는 useState를 알아보려고 한다. 상태값을 전달해서 해당 상태의 값의 변동으로 React가 웹 브라우저를 랜더링 시킬 수 있다. useState를 활용해서 다양한 형태의 코드를 살펴 보려한다. 우선 내가 작성한 useState는 아래와 같다.
import { useState } from "react";
function Class_App() {
const [name, setName] = useState("Mike");
function changeName() {
if (name === "Mike") {
setName("Jane")
} else if (name === "Jane") {
setName("Mike")
}
}
return (
<div>
<h1>state</h1>
<h2>{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
}
export default Class_App;
if문을 사용해서 만들었지만 이를 좀더 간략하게 할 수 있다. 아래 코드를 살펴보자.
import { useState } from "react";
function Class_App() {
const [name, setName] = useState("Mike");
function changeName() {
const newName = name === "Mike" ? "Jane" : "Mike";
setName(newName);
}
return (
<div>
<h1>state</h1>
<h2>{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
}
export default Class_App;
newName으로 삼항연산자(조건연산자)의 값을 받고 받은 값을 setName으로 상태를 변경한다. 그렇게 변경된 내용으로 React는 브라우저를 다시 랜더링 하게 되는 것이다. 이를 변수에 답지 않고 setName에 바로 적용하면 아래와 같다.
import { useState } from "react";
function Class_App() {
const [name, setName] = useState("Mike");
function changeName() {
setName(name === "Mike" ? "Jane" : "Mike");
}
return (
<div>
<h1>state</h1>
<h2>{name}</h2>
<button onClick={changeName}>Change</button>
</div>
);
}
export default Class_App;
이외에도 함수에 직접 화살표기법으로 줄수도 있다. 아래코드와 같다.
import { useState } from "react";
function Class_App() {
const [name, setName] = useState("Mike");
return (
<div>
<h1>state</h1>
<h2>{name}</h2>
<button onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
}}>Change</button>
</div>
);
}
export default Class_App;
useState의 기본적인 형태는 굉장히 단순하지만 이를 복잡하게 구조화하고 응용한다면 충분히 어려울 수 있다.
728x90