react에서 state는 컴포넌트가 가질 수 있는 상태이다.
useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구이다.
const [state, setState] = useState(초기값);
이렇게 변수를 생성 하는 것이 기본 상태이다.
만약 시간을 관리하고 싶다고 가정해보자.
const [time, setTime] = useState(1);
setTime(6);
이렇게 입맛에 맞게 변경 가능하다.
time에 들어있는 기본값은 1이고 setTime을 통해 재정의가 가능하며 setTime을 실행하면 해당 컴포넌트는 다시 렌더링 된다.
간단하게 시간을 카운트 해보는 페이지를 만들어보자.
import { useState } from 'react'
import './App.css';
function App() {
// 시간의 초기값은 1이다.
const [time, setTime] = useState(1);
// 시간이 24시를 넘으면 1시로 초기화되는 함수.
const increseTime = () => {
if (time >= 24) {
setTime(1)
} else {
setTime(time + 1)
}
// 함수를 실행할 때마다 렌더링이 되는지 확인해보자.
console.log("렌더링")
}
return (<>
<div>
<span>현재 시각 : {time}시</span><p/>
<button onClick={increseTime}>Update</button>
</div>
</>
);
}
export default App;
실행이 되는지 보자.
 |
 |
5번 클릭 했을때 시간이 업데이트 되며 컴포넌트가 리렌더링 되는 것을 확인 할 수 있었다.
두번째 에제로는 첫번째 예제에서 추가 기능을 넣었다.
input에 글을 넣으면 배열에 추가한 후 차례로 띄워주는 기능을 만들었다.
function App() {
const [time, setTime] = useState(1);
// input의 값을 넣을 배열 선언
const [names, setNames] = useState([]);
//input의 상태
const [input, setinput] = useState("");
// input 태그에 입력된 value 값을 input 변수에 적용
const handleInputChange = (e) => {
setinput(e.target.value)
};
// setName 배열에 기존에 input값과 콜백함수를 통한 새로운 값을 넣는다.
const handleUpload = () => {
setNames((prevS) => {
return ([input, ...prevS])
})
// 로그 확인!
console.log(names)
};
const increseTime = () => {
if (time >= 24) {
setTime(1)
} else {
setTime(time + 1)
}
console.log("렌더링")
}
return (<>
<div>
<span>현재 시각 : {time}시</span><p />
<button onClick={increseTime}>Update</button>
</div>
<div>
<input type="text" value={input} onChange={handleInputChange} />
<button onClick={handleUpload}>Upload</button>
// 맵 함수로 name 값을 뿌려준다.
{names.map((name, idx) => {
return (<div key={idx}>{name}</div>)
})}
</div>
</>
);
}
하지만 무거운 작업을 실행하게 되었을때는 컴포넌트가 리렌더링 되면 비효율적일 것이다. 렌더링 되고나서 한번만 실행 하게 할 수 있는데, useState에 콜백함수를 넣어 주거나, useEffect를 사용하면 된다. (useEffect는 다음 포스팅에서 다룰 예정)
코드가 난해해서 다른 코드는 빼버렸다. 먼저 콜백 함수를 넣지말고 함수를 실행해보자.
const heavyWork = () => {
console.log("무거운 작업이다!")
return [];
}
function App() {
const [time, setTime] = useState(1);
// 콜백 x
const [names, setNames] = useState(heavyWork());
return(<>
</>
)
}
콜백함수를 감싸서 다시 실행해보자.
const [names, setNames] = useState(() => {heavyWork()});
// 두가지 문법 모두 사용가능
const [names, setNames] = useState(() => {
return heavyWork();
});
다음 포스팅에서는 useEffect에 대해서 다룰 예정이다.
출처 : 별코딩, React Hooks에 취한다 - useState 15분만에 마스터하기 | 리액트 훅스 시리즈
이 글은 유튜버 별코딩님의 강의를 듣고 다시 정리하였습니다.
