React Hooks

Jay·2021년 1월 7일

React

클래스형 컴포넌트로 리액트를 사용하다보니, 불편함 점들이 여럿 있었다.

클래형 컴포넌트

단점

1. this binding, binding event handler

2. 이해가 어려운(가독성 떨어지는) 복잡한 컴포넌트

cDM, cDU, cWU
언제 어떻게 작동할 것인지 예측,파악하기 복잡한 구조이다.
(🤔 나만그런가?..)

React Hooks 기능을 사용하면 이러한 불편함을 줄일 수 있다.

함수형 컴포넌트

Hooks

useState

const [number,setNumber] = useState(0)

  - 첫째 `number`는 실제 데이터 , 둘째 `setNumber`는 number를 수정하기 위해 사용한다.
  
  - setState를 사용하지 않고, setNumber 변수를 활용하여 수정하면 된다.
  
  - useState() 괄호안의 값은 초기값을 의미한다. 
  ㄴ 예시에선 number를 0으로 설정했다는 뜻이다.

--
숫자 카운팅 앱

// App.js

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

function App() {
  const [number, setNumber] = useState(0);

  const incBtn = () => {
    setNumber(number + 1);
  };
  const decBtn = () => {
    setNumber(number - 1);
  };


  return (
    <>
      <div>{number}</div>
      <button onClick={incBtn}>increase</button>
      <button onClick={decBtn}>decrease</button>
    </>
  );
}

export default App;

넘버가 버튼을 누를 때 마다 변하는 것을 확인할 수 있다.

숫자가 어디까지 늘었다 줄었는지 확인해보고싶다... 로그를 보고싶다..
useEffect를 사용해서 확인해보자

useEffect

useEffect(()=> console.log(`카운터 작동, 현재 숫자: ${number}`),[number])

무엇을 ? 위의 내용을 console.log로 출력하겠다. 
어떻게 ? 두번째 인자(number)의 업데이팅마다.

생명주기(Life Cycle) 활용

마운트될 때만 실행

두번째 파라미터에 빈배열을 넣어주면 된다.

useEffect(()=>{
	console.log('마운트 될 때만 실행')
}, [])

특정 값이 업데이트 될 때만 실행

useEffect(()=> console.log(` 숫자가 ${number} 으로 변경되었습니다.`),[number])

--
숫자 카운팅 앱
아래는 구현한 App에 2의 방식(업데이트 될 때)을 사용하여 구현한 내용이다.

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

function App() {
  const [number, setNumber] = useState(0);

  const incBtn = () => {
    setNumber(number + 1);
  };
  const decBtn = () => {
    setNumber(number - 1);
  };

  useEffect(() => {
    console.log(`카운터 작동, 현재 숫자: ${number}`);
  }, [number]);

  return (
    <>
      <div>{number}</div>
      <button onClick={incBtn}>increase</button>
      <button onClick={decBtn}>decrease</button>
    </>
  );
}

export default App;