React Hooks (UseState, useEffect)

React Hooks

React 에서 Hooks가 나오기전가지 우리는 state와 setState를 이용하기 위해서 Class 함수를 사용했다. Class 함수에서 오는 불편함을 해결하기 위해 Hooks 라는것이 나왔다. Hook는 class 대신에 모든것을 '함수' 형태로 사용할수 있게 해준다. state를 사용할때 굉장히 간결하고 편리한데 class 에서 처럼 this를 안써도되며 constructor을 사용하지않아도 되고 side effect 로 라이프사이클을 조정할 수 있다.(componentDidMount, componentDidUpdate, componentWillUnmount).

State 와 UseState

react 에서는 오직 class 함수에서만 state(변할수 있는 상태)를 사용할수 있었고, setState는 기본에 있는 state에서 변경된 state를 합칠수 있었다. Hooks 에서는 function 에서는 쓸수 없었던 state를 useState를 사용함으로써 State를 사용 할 수 있게 되었다.

const [original, setOriginal] = useState(0); 

original 은 class 에서 this.state (상태)를 나타내고, setOriginal은 class 에서 setState (상태)를 나타낸다. original 과 setOriginal의 이름은 마음대로 변경할수 있다. useState는 React 라이브러리에서 가져온 것이다. (import React, { useState } from 'react';) usetState 괄호 안에있는 수는 상태 변수 original의 초기값이며 변경되어지는 '상태'이다. 초깃값은 string, 함수, 배열, 객체 등 아무거나 들어갈수있다.

import React, { useState } from 'react';

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

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

이전에 봤던 Class 함수 this.state 와는 다르게 엄청 간결하고 쉽게 사용할수있다.

useEffect

useEffect 는 componentDidMount, componentDidUpdate, componentWillUnmount 를 관리하게 해준다.

componentDidMount = 렌더가 성공적으로 실행되면 '딱한번' ComponentDidMount가 실행된다.딱 한번 이라는 것은 setState 등이 실행되어도 다시 실행되지 않는다는 것을 뜻한다. 마지막 배열이 비어있을경우 did mount

  useEffect(() => {
    setTimeout(() => {
    	document.title = `You clicked ${count} times`;
    }, 3000);   
  }, []);

componentDidUpdate = props가 변하거나 setState가 변화될때 렌더링된다. 마지막 배열이 있을경우 count가 업데이트 될때마다 렌더링된다. did update

useEffect(() => {
	setTimeout(() => {
   	document.title = `You clicked ${count} times`;
   }, 3000);   
 }, [count]);

componentWillUnmount = 컴포넌트가 성공적으로 제거되었다면 제거되기 바로 직전에 실행된다.