Hook
이전 포스팅에서 설명했듯 과거에는 클래스 컴포넌트를 작성했지만 현대에 들어서는 대부분 함수(Hook) 컴포넌트로 작성한다.
Hook을 이용하면 기존 클래스 방식보다 코드가 간결해지고 원활하게 상태(State) 값과 여러 React의 기능을 사용할 수 있다.
또한 두 방식은 상태(State)값에 따라 아래와 같은 실행 과정에서의 아래와 같은 차이점이 존재한다.
클래스 방식은
state값이 변경되면render()함수만 재실행된다.
하지만 함수형(Hook) 방식은state값이 변경되면 함수 코드 전체가 재실행된다.
이 포스팅에서는 기본적은 Hook에 사용방법에 대해 설명하도록 하겠다.
State Hook
Hook은 현재의state값과 이 값을 업데이트하는 함수(setState)의 쌍으로 구성
Hook은 JavaScript의 배열 구조 분해 문법을 사용하여 useState로 호출된 state 변수들을 다른 변수명으로 할당한다.
useState는 클래스 방식의 this.setState와 흡사하지만, 가장 큰 차이점은 이전 state와 새로운 state를 합치지 않는것이다.
함수 컴포넌트에서는 Hook을 호출해 state를 추가, 변경하는데 이는 컴포넌트가 리랜더링되어도 그 값을 그대로 유지한다.
아래 예제는 기존 클래스 방식을 사용해 제품의 갯수를 추가한다.
class ShoppingList extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<h1>맛있는 사과</h1>
<div>
<div>{this.state.count}</div>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
+
</button>
</div>
</div>
);
}
}
위 코드를 Hook으로 변환하면 다음과 같다.
import React, { useState } from 'react';
function ShoppingList() {
// "count"이라는 state를 선언
const [ count, setCount ] = useState(0);
const onClickBtn = () => {
// "setCount"로 "buyApple" state를 변경
setCount(count + 1);
};
return (
<div>
<h1>맛있는 사과</h1>
<div>
<div>{count}</div>
<button onClick={onClickBtn}>+</button>
</div>
</div>
);
}Hook 사용방법
React의 함수 컴포넌트는 함수 선언문, 화살표 함수로 표현한다.
// 함수 선언문
function ShoppingList(props) {
return <div />;
}// 화살표 함수
const ShoppingList = (props) => {
return <div />;
}state 변수 선언
클래스 컴포넌트에서는 state는 다음과 같이 선언했다.
constructor(props) {
super(props);
this.state = {
count: 0
};
}하지만 함수 컴포넌트에서는 this.state를 할당하거나 읽을 수 없다.
그래서 useState Hook을 직접 컴포넌트에서 호출한다.
import React, { useState } from 'react';
function ShoppingList() {
const [ count, setCount ] = useState(0);useState는 클래스 컴포넌트의 this.state와 기능적으로 동일하다.
또한 useState의 인자로 값을 전달하여 state의 초기 값을 지정한다.
state 사용
클래스 컴포넌트에서 state값은 다음과 같이 사용했다.
<div>{this.state.count}</div>함수 컴포넌트에서는 다음과 같이 조금 더 간결하게 state값을 사용할 수 있다.
<div>{count}</div>setState
클래스 컴포넌트에서는 state값을 갱신하기 위해 다음과 같이 사용했다.
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
+
</button>함수 컴포넌트에서는 다음과 같이 간결하게 state값을 갱신한다.
<button onClick={() => setCount(count + 1)}>
+
</button>prevState
클래스 컴포넌트에서는 이전 state값을 참조하여 새로운 state를 생성할 때 다음과 같이 사용했다.
<button onClick={() => this.setState((prevState) => {
return {
count: prevState.count + 1
}})}
>
+
</button>함수 컴포넌트에서는 prevState를 다음과 같이 조금 더 간결하게 사용한다.
<button onClick={() => setCount((prevCount) => {
return prevResult + 1;
})}
>
+
</button>참고 자료
