useState (Hook)
useState 사용하여 컴포넌트 내에서 바뀌는 값을 관리할 수 있다.
Hook을 통해 useState를 사용할 수 있는데 Hook은 React 16.8버전에 추가된 기능이다.
클래스 컴포넌트를 사용하지 않아도 state를 관리할 수 있다.
useState 사용해보기 (함수형 컴포넌트)
import { useState } from 'react';- 먼저, useState를 import 해온다.
const [value, setValue] = useState(0);- 비구조화 할당 문법을 사용하여 app 함수 안에 변수를 작성한다.
위 코드는 value라는 이름의 state 변수이고 초기값은 0이다. 이 값을 변경할 때는 setValue라는 함수를 사용할 수 있다.
<div>{ value }</div>- 작성한 state변수를 바인딩하는 방법이다.
중괄호 안에 state 변수 명을 작성하면 된다.
<button onClick={increase}>증가</button>- 버튼을 하나 만들고 버튼을 누르면 value 값을 1씩 증가시켜서 화면에 재렌더링 시켜보기로 했다.
onClick 속성을 달고 중괄호 안에 함수를 작성해주면 된다.
function increase() {
setValue(value + 1);
}- increase라는 함수를 만들었다.
state 변수를 선언할 때 value와 함께 만들었던 setValue이다.
state 변수 (여기서는 value)를 변경할 때 이 함수를 호출하면 된다. value값을 1증가시킬 것이기 때문에 value + 1을 setValue의 인자로 넣어주었다.
증가 버튼을 누르면 value 값이 1씩 증가하는 것을 확인할 수 있다.
클래스형 컴포넌트로 작성해보기
요즘에는 hooks로 인해 함수형 컴포넌트를 사용한다고 한다.
그럼에도 클래스형 컴포넌트로 작성된 코드를 읽어야 하는 상황이 있을 수 있기 때문에 기본 작성방법 정도는 알면 좋다고 한다.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
render() {
return (
<div>
<div>{this.state.value}</div>
<button onClick={() => this.setState({ value: this.state.value + 1 })}>증가</button>
</div>
);
}
}두가지 작성법 모두 사용해봤는데 확실히 클래스형 컴포넌트가 조금 더 어렵고 복잡하게 느껴졌다.
함수형 컴포넌트와 클래스형 컴포넌트의 차이점 👀
함수형 컴포넌트는 직접적으로 state 변수의 이름만 작성해주어도 된다. 하지만, 클래스형 컴포넌트는함수형 컴포넌트와 달리 데이터 바인딩을 하려면 this.state.value 와 같이 this.state.변수명 형태로 접근해야 한다.
state를 갱신할 때는 클래스형 컴포넌트는 this.setState({ 변수명 : 변경할 값 })를 호출하여 값을 변경할 수 있다. 함수형 컴포넌트는 this를 호출하지 않고 set변수명() 형태로 작성하여 사용할 수 있다.
함수형 컴포넌트는 this를 가질 수 없다.
클래스형 컴포넌트에서는 this.setState를 호출해서 사용한다. 하지만 함수형 컴포넌트는 this를 가질 수 없기 때문에 useState Hook을 직접 컴포넌트에서 호출한다.
useState는 뭘까?
1. state 변수를 선언할 수 있도록 한다.
일반 변수는 보통 함수가 끝나면 사라지지만, state 변수는 React에 의해 사라지지 않는다.
2. useState의 인자로 무엇을 넘기나?
useState() Hook의 인자로 넘겨주는 값은 state의 초기값이다. 함수 컴포넌트는 클래스형 컴포넌트와 달리 객체일 필요가 없다.
즉, 숫자 또는 문자 타입을 사용할 수 있다.
3. 여러개의 state 변수를 사용하려면?
각각 다른 여러개의 state 변수를 사용하고 싶다면useState()를 여러번 호출하면 된다.
4. useState의 반환값
state 변수와 state변수를 갱신할 수 있는 함수를 반환한다.
const [count, setCount] = useState(0);위 코드는 count 라는 state변수 선언 및 0으로 초기화한다. React에서 count 변수를 리렌더링 할 때 기억하고 가장 최근에 변경된 값을 제공한다.
count 변수 값을 갱신(변경)하기 위해선 setCount 함수를 호출하면 될 것이다.
useState는 컴포넌트 렌더링시 딱 1번만 생성이 된다.
