[React Hook] 2. State Hook

출처 공식 문서 : Using the State Hook – React (reactjs.org)

 

 

대표적인 Hook으로 useState 가 있다.

 

 

1. state 변수 선언하기

 

과거)

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

 

Hook)

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
}

>> 새로운 state 변수 count 를 선언. setCount는 count를 set해주는 함수 이름.

> state를 함수 컴포넌트 안에서 사용할 수 있게 해준다.
> 함수가 호출되고 끝나도 state 변수 값이 유지된다.(가장 큰 변경점)
> 그래서 상위컴포넌트에서 값을 받아 업데이트 해줄 필요가 없다.
> useState(초기값) 으로, count는 0으로 초기화되고 값을 갱신하려면 setCount를 호출하면된다.

 

 

2. state 가져오기

 

과거)

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

 

Hook)

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

 

 

3. state 갱신하기

 

과거)

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

 

Hook)

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

 

 

4. 요약

import React, { useState } from 'react';

function Example(){
  const [const, setCount] = useState(0);

  return(
    <div>
      <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
  );
}

 

 

5. 팁

> 여러개 변수 선언 가능

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}