[STUDY] State Hook 사용하기

Hook 와 같은 기능을 하는 클래스

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

• 위 React 클래스에서 state 는 { count: 0} 이며 사용자가 this.setState()를 호출 하는 버튼을 클릭했을때 state.count를 증가시킨다.

function Example(props) {
	// Hooks 사용 
	return <div />;
}

// or

const Example = (props) => {
	// Hooks 사용
	return <div />;
}

• React 의 함수 컴포넌트는 위와 같이 사용할 수 있다.
• 함수 컴포넌트는 state 가 없는 컴포넌트이다.
• Hook는 state를 함수 안에서 사용할 수 있게 해준다.

Hook 란?

import React, { useState } from 'react'; function Example() { // ... }

import React, { useState } from 'react';

function Example() {
  // ...
}

• useState 는 state 를 함수 컴포넌트 안에서 사용할 수 있게 해준다.
• 클래스를 사용할 때, constructor 안에서 this.state 에 값을 설정함을로 state를 초기화 했다.
• 함수 컴포넌트는 this를 가질 수 없기 때문에 useState Hook를 직접 컴포넌트에서 호출한다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

• useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.
• 일반적으로 사라지는 변수와는 다르게 state 변수는 React에 의해 사라지지 않는다

useState 인자

• state 의 초기 값이다.
• 객체일 필요는 없고 숫자타입과 문자 타입을 가질 수 있다.

useState 반환값

• state 변수와 해당 변수를 갱신할 수 있는 함수 두가지를 반환한다.
• 클래스 컴포넌트의 this.state.count 와 this.setState와 유사하다.

State 가져오기

<p>You clicked {this.state.count} times</p>

• 클래스 컴포넌트는 this.state.count를 사용한다.

<p>You clicked {count} times</p>

• 함수 컴포넌트는 count를 직접 사용할 수 있다.

State 갱신하기

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
   Click me
</button>

• 클래스 컴포넌트는 this.setState()를 호출한다.

<button onClick={() => setCount(count + 1)}>
    Click me
</button>

• 함수 컴포넌트는 setCount 와 count 변수를 사용한다.

대괄호가 의미하는 것

const [count, setCount] = useState(0);

• 자바스크립트의 문법인 배열 구조 분해를 통해 총 두개의 값을 만들고 있다.
• 즉 useState를 사용하면 count라는 첫번째 값과 setCount라는 두번쨰 값을 반환한다.

여러개의 state 변수 사용하기

function ExampleWithManyStates() {
  // 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

• 위의 처럼 각각 다른 이름으로 state를 선언 하는것이 유용하다.
• age, fruit, todos 라는 지역 변수를 가지며 개별적으로 갱신 할 수 있다.