리액트에서 state는 필수 요소이다. props와 함께 절대 분리할 수 없다.
그렇다면 state는 뭐고 props는 뭘까?
공식 문서에 따르면 state는 컴포넌트 내에서 관리되는 데이터 이며 (변수처럼) props는 컴포넌트에서 사용하고자 전달되는 데이터 (매개변수처럼) 이다.
오늘 포스팅에서는 React 16.8v 에서 나온 Hook을 이용해 함수형 컴포넌트에서 state를 사용하는 방법에 대해서 알아보려고 한다.
1. state 란?
위에서 언급했듯이 state란 컴포넌트 내에서 관리되는 데이터이다.
2. 함수형 컴포넌트에서 state
Hook이 공개되기 전 함수형 컴포넌트는 state가 없는 컴포넌트였다. 함수형 컴포넌트에서 state를 사용하려면 클래스형 컴포넌트로 코드를 수정해야만 했다. 하지만 Hook이 공개된 이후로 기본적인 Hook을 사용해 함수형 컴포넌트에서 state를 사용할 수 있게 되었다.
함수형 컴포넌트에서 Hook을 사용하려면?
함수형 컴포넌트에서 Hook을 사용하려면 두가지 규칙을 지켜야한다.
- 항상 최상위 레벨에서 사용할 것 (at the top level)
최상위 레벨이란 블록이나 특정 함수 안에서 사용할 수 없다는 것이다.- 항상 함수형 컴포넌트 안에서 사용할 것
그럼 코드를 살펴보자
function Wrapper() {
const [count, setCount] = useState(0);
const onClick = () => {
setCount((prev) => prev+1);
};
return (
<div>
<span>{count}</span>
<button onClick={onClick}>click</button>
</div>
);
}
편의상 import는 생략했다.
먼저 함수형 컴포넌트에서 useState() 라는 Hook을 사용하면 state와 state를 변형할 수 있는 modifier 함수를 받을 수 있다.
state는 직접 변경되어서는 안된다. 반드시 set함수를 이용해서 값을 변형해야한다.
또한 useState() 의 매개변수로써 default값을 넣어줄 수 있다.
setCount()함수의 인자로는 익명함수를 전달해줬는데 익명함수의 매개변수로 이전 값을 받아서 값을 변화시킨 뒤 state를 변경해줬다.
이렇게 state가 변경되면 해당 state를 관리하는 컴포넌트는 리랜더링된다.
3. state Hook의 장점
Hook이 나오기 전에는 state를 클래스형 컴포넌트에서만 관리할 수 있었다. 또한 state를 사용하려면 this 키워드를 사용해야 하는데 Javascript에서 this 키워드는 다른 언어와 다르게 사용됨으로 개발자에게 상당한 혼동을 안겨줬다.
Hook 출시 이후 함수형 컴포넌트에서 state를 사용, 관리할 수 있게 되었으며 이는 개발자가 더 편리하고 다양한 state를 활용할 수 있게 해줬다. 더 나아가 Hook을 활용해 컴포넌트 안에서 여러개의 state를 관리할 수 있게 되었다.
공부하는 단계여서 잘못된 정보가 있을수도 있습니다.
제가 잘못 알고 있는 부분이나 잘못된 정보는 댓글로 교정해주시면 감사하겠습니다.
