[React] React Hook - useState

 

Hook 호출의 규칙?

반복문, 조건문, 중첩되는 함수 내에서 Hook를 호출할 수 없다. return이 실행되기 전 react 함수의 최상위 레벨에서 Hook를 사용해야 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장한다. 이를 통해 useState, useEffect와 같은 Hook이 여러 번 호출되는 중에도 그 상태를 올바르게 유지할 수 있다.

 

 

// React의 함수 컴포넌트는 어떻게 생겼을까?
// 1)
const App = (props) => {
// 여기에 react hook를 사용하면 된다. 아래도 마찬가지
  return <div />;
};

// 2) 
function App(props) { 
  return <div />; 
}

 

응 단축키 딸깍 할거야 rafce rfce Hook는 react state를 함수 안에서 사용할 수 있게 하는데, 클래스 안에서는 동작하지 않지만 굳이 클래스를 작성하지 않고도 쓸 수 있다. 아래의 코드를 보자.

 

import React, { useState } from "react";

function ExampleA() {
  // state 변수 선언
  const [count, setCount] = useState(0);

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

export default ExampleA;

// class 문법으로 같은 코드 작성
class ExampleB extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

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

// state는 { count : 0 } 이고, this.setState()를 호출하는 버튼을 클릭하면 state.count를 1씩 증가시킨다.

 

---

 

// useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 한다.
import React, { useState } from 'react'

function App() {

    const [count, setCount] = useState(0);
  return (
    <div>App</div>
  )
}

export default App

 

 

useState의 인자로 무엇을 넘겨주는가?
useState() Hook의 인자로 넘겨주는 값은 곧 state의 초기값이 된다. state는 클래스 문법에서처럼 객체여야 할 필요는 없다. 문자 타입, 숫자 타입도 될 수 있고, 위의 코드에서는 0을 초기값으로 선언했다. 만약 서로 다른 2개의 변수를 저장하고 싶다면 useState()도 두 번 호출해야 한다.

 

 

useState는 무엇을 반환하는가?
state 변수와 이를 변경(갱신)할 수 있는 함수를 반환한다. const [state, setState] = useState()라고 쓰는 것도 그런 까닭이다. 배열의 구조분해를 떠올리면 더 이해하기 쉽다. const [fruit, setFruit] = useState('banana');에서 useState를 사용하면 fruit, setFruit을 반환한다.