[REACT] Hooks(1) - useState
훅(Hook) 이란?
함수 컴포넌트에서 상태 관리, 렌더링 제어, 부작용 처리 등의 기능을 제공한다.
알고 있으면 도움이 될 Hook의 종류로는
useState, useEffect, useContext, useReducer 크게 4가지가 있다.
이것들을 모아 Hooks 라고 일컫는다.
Hooks의 장점
ㆍ코드의 가독성 향상 : 클래스 컴포넌트에서는 상태와 생명주기 메서드가 함께 작성 되어,
코드가 복잡해지는 경우가 많은데 Hooks 를 사용하면 상태와 관련된 코드, 생명주기 메서드가 분리되어
가독성이 좋아진다.
ㆍ 클래스 컴포넌트의 단점 보완 : 클래스 컴포넌트에서는 this 키워드를 사용해야 하기 때문에
this 바인딩과 관련된 문제들이 발생할 수 있는데, Hooks 를 사용하면 이러한 문제를 해결할 수 있다.
useState
useState는 리액트에서 상태를 관리할 때 사용하는 Hook이다.
만약 내가 현재 점심을 먹었는지 안 먹었는지를 표시하고 싶다면 useState를 사용해 상태를 저장할 수 있다.
useState는 두 가지 값을 반환하는데
첫 번째 값은 현재 상태를 나타내는 값이고 두 번째 값은 상태를 업데이트 하는 함수이다.
자세한 내용은 아래의 예제 코드에서 설명하겠다.
기본 문법
const [eat, setEat] = React.useState(true);
기본적인 문법은 위와 같다.
React.useState(true)에서 true가 eat의 현재 상태(기본값)를 나타내는 부분이고
setEat은 상태를 업데이트 하는 함수이다.
React에서 중요한 개념 중 하나가 불변성(Immutability)이라는 개념인데
기본값(eat)의 상태를 직접적으로 변경하는 것이 아니라
setEat 함수를 통해 새로운 상태를 생성하고 그 값으로 기본값의 상태를 업데이트 하는 것이다.
그리고, const [eat, setEat] 는 ES6에서부터 새로이 추가된 문법인데 배열 구조 분해라고 한다.
배열 구조 분해에 대해서는 다른 포스트에서 상세하게 기술할 예정이다.
예제 코드 1 - boolean 값을 변경
export default function App() {
const [eat, setEat] = React.useState(true);
const stateChange = () => {
setEat(!eat);
}
return (
<div>
<button type="button" onClick={()=>stateChange()}>상태변경</button>
</div>
);
};
예제 코드 2 - text 값을 대문자로 변경
export default function App(){
const [val, setVal] = React.useState("hello world");
const changeVal = () => {
setVal("HELLO WORLD");
}
return (
<div align="center">
<p>{val}</p>
<button onClick={()=>{changeVal()}}>Click me!</button>
</div>
)
}
예제 코드 3 - SelectBox 값 변경 확인
export default function App(){
const [val, setVal] = React.useState("red");
const changeVal = (e) => {
setVal(e.target.value);
console.log(val);
}
return (
<div align="center">
<select value={val} onChange={changeVal}>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
</div>
);
};
이렇게 해서 상태가 변경될 때마다 리액트가 자동으로 컴포넌트를 다시 렌더링 해주는
useState Hook에 대해서 정리해보았다.
다음 포스트에서는, useEffect에 대한 내용을 기술할 예정이다.