[D+81] React Hook

 

 

D+81

-  React Hook -

(React Hook)

 

---

 

 

React Hook

기존에 우리는 리액트에서 상태를 관리해주기 위해서는 function이 아닌 Class를 사용해 상태를 관리해 왔다.

 

Class로 상태를 관리해오면서 느낀점은 초기상태를 설정해주고 특정 상태를 변경하기 위해서 상태를 불러오고 불러온 상태를 변경하는 과정에서 꽤나 복잡한 과정이라는 것을 느꼈다.

 

뿐만 this에 대한 개념이 어느정도 있어야 했기 때문에 bind를 사용해주고,

this를 잘 사용해야만 큰 실수 없이 상태를 제대로 관리할 수 있었다.

 

이러한 꽤 불편한 점을 해소하기 위해 Hook이 들어오게 되었는데

어떻게 Hook을 사용하는지에 대해서 간단하게 알아보려고 한다.

 

 

useState

import React, { useState } from 'react';

function Example() {
  // ...
}

먼저 우리가 훅을 사용하기 위해서는 useState를 설정해 주어야 한다.

 

import React, { useState } from 'react';

function Example() {
  // [state 변수 : count , state 변수를 갱신할 수 있는 함수 : setCount]
  // 초기값 : 0
  const [count, setCount] = useState(0);

useState는 우리가 클래스 함수에서 this.state로 초기 값을 설정해 주었듯이

마찬가지로 useState안에 특정 값을 넣어 초기 값을 설정해 줄 수 있다.

 

이때 Class에서 this.state라는 객체 안에 변수를 설정해 주었지만

훅스는 "[ ]"안에 "[변수, 변수를 갱신할 수 있는 함수]" 형태로 값을 넣어주어야 한다.

 

 

state 가져오기

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


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

기존에 우리가 특정 상태를 가져오기 위해서는 클래스 컴포넌트에서 this.state를 이용해 불러오는 과정을 거쳤지만

함수 컴포넌트인 훅을 사용하게 될 경우에는 우리가 초기에 설정한 상태변수만 가져오면 된다.

 

state 갱신하기

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



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

상태의 값을 변경하거나 갱신하기 위해서는 클래스 컴포넌트에서 this.setState라는 것을 사용해 주었지만,

함수 컴포넌트에서는 상태변수를 지정해 주었을때 상태 변수를 갱신할 수 있는 함수를 설정해 주었으므로

해당 함수에다가 원하는 값을 넣어 상태를 변경해주거나 갱신해 줄 수 있다.

 

Effect Hook

import React, { useState, useEffect } from 'react';

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

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

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

Effect Hook은 우리가 클래스 컴포넌트에서 라이프 사이클인 생명주기에서 사용되었던 것들 대신에

useEffect만으로 구현할 수 있는 것이다.

 

(effect hook은 아직 제대로 학습하지 못해 더 공부해봐야 할 것 같다.)