React Hooks: "useState"

useState함수는 배열값을 리턴한다 그리고 useState함수 안에 배열에는 2개의 값만 존재고 2개만 사용할 수 있다. 하나는 초기값([value] Primitive data type: undefied), 나머지 하나는 함수([update the value] f())이다.

[Hook을 사용한 방식] Using State Hook

import React, { useState } from 'react'; ← useState를 불러온다.

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [ count, setCount ] = useState(0); ← 변수(count) 초기값은 '0'이다. setCount는 변수(함수형)이다.

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

 

[기존방식] using setState({ })

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>

    );

  }

}

 

state 가져오기, 사용하기

클래스 컴포넌트는 count를 보여주기 위해 this.state.count를 사용합니다.

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

반면 함수 컴포넌트는 count를 직접 사용할 수 있습니다.

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

 

[TIP#1] 대괄호가 의미하는 것은 무엇?

const [fruit, setFruit] = useState('banana'); 

↓↓ 위 표기법은 아래와 같다.

var fruitStateVariable = useState('banana'); ← fruitStateVariable은 fruit과 setFruit을 담고 있는 배열이고 할당 연산자 (=) 우측에 새로운 배열로 useState에 새로운 변수를 저장했다. (아래 사진 참고)

var fruit = fruitStateVariable[0]; // 첫 번째 아이템

var setFruit = fruitStateVariable[1]; // 두 번째 아이템

 

useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어집니다. 첫 번째 아이템은 현재 변수를 의미하고, 두 번째 아이템은 해당 변수를 갱신해주는 함수입니다. 배열 구조 분해라는 특별한 방법으로 변수를 선언해주었기 때문에 [0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있습니다.

 

[TIP#2] 여러 개의 state변수를 사용할 수 있다.

const [age, setAge] = useState(42); // 숫자형

const [fruit, setFruit] = useState('banana'); // 문자형

const [todos, setTodos] = useState( [ { text: 'Learn Hooks' } ] ); // 객체형(Object literal)