[TIL] 엘리스 SW 엔지니어 트랙 Day 051

📖 오늘 배운 내용 - 2022.01.01

• Hooks
• Effect Hook
• useMemo
• useCallback
• useRef
• useReducer

 

📝 Hooks

• 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.

const App = () => {
    const [username, setUsername] = useState('')
    return (
        <div>
            <h1>{username}님 환영합니다.</h1>
        </div>
    )
}

• Hook은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다.
• Hook의 이름은 반드시 use로 시작해야 된다.
• 최상위 Level에서만 Hook을 호출할 수 있다. (if문, for문 안 쪽 또는 콜백 함수 내에서 호출 X)
  • 즉, 첫 번째 중괄호 안에서만 사용해야 된다.

 

📝 State Hook과 Effect Hook

[React] 리액트 State Hook과 Effect Hook

 

📝 useMemo

[React] 리액트 useMemo 사용법

 

📝 useCallback

[React] 리액트 useCallback 사용법

 

📝 useRef

[React] 리액트 useRef사용법

 

📝 useReducer

[React] 리액트 useReducer사용법

 

📝 나만의 Hook 만들기

• 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다.
• UI 요소의 재사용성을 올리기 위해 컴포넌트를 만드는 것처럼, 로직의 재사용성을 높이기 위해서는 Custom Hook을 제작한다.

function useMyHook(args) {
    const [status, setStatus] = useState(null);
    // ...
    return status;
}

• 한 로직이 여러 번 사용될 경우 함수를 분리하는 것처럼 Hook을 만드는 것일 뿐, 새로운 개념은 아니다.
• Hook의 이름은 use로 시작해야 한다.
• 한 Hook 내의 state는 공유되지 않는다.

 

📕 예시

import React from 'react';
import useToggle from './hooks/useToggle';

function App() {
  const { isOn, toggle } = useToggle(false);

  return (
    <div className="App">
        <button onClick={() => {
            toggle();
        }}>
            {isOn ? "켜짐" : "꺼짐"}
        </button>
    </div>
  );
}

export default App;

import  { useState } from 'react';

const useToggle = (init) => {
  const [isOn, setIsOn] = useState(init);

  const toggle = () => {
    setIsOn((current) => {
        return !current;
    });
  }

  return { isOn, toggle }; 

}

export default useToggle;

 

💡 오늘 깨달은 것

• Hook은 아주 특별한 함수이다.
• Hook은 클래스 안에서 동작하지 않기 때문에 클래스를 작성하지 않고 사용해야 한다.
• Hook을 이용하면 함수형 컴포넌트 안에서 state를 사용할 수 있다.
• useState()는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다. 일반적으로 변수는 함수가 끝날 때 사라지지만 State 변수는 사라지지 않는다.
• 콜백이란 함수의 인자로 넘겨진 함수로 기존 함수의 실행이 끝나고 난 뒤 실행되는 함수 또는 특정 시점이나 이벤트가 발생했을 때 시스템이 자동으로 실행시키는 함수를 말한다.