[React] React Hook API

Hook 개요

• Hook은 class를 작성하지 않고도 state와 다른 React의 다른 기능들을 사용할 수 있게 해줌
• Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줌

기본 Hook

• useState
• useEffect
• useContext

추가 Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

library hooks

• useSyncExternalStore
• useInsertionEffect

📌State Hook

여러 state 변수 선언하기

하나의 컴포넌트 내에서 state hook을 여러개 사용할 수 있음

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

HOOK이란?

• 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수
• class 안에서는 동작하지 않음

⚡️ Effect Hook

• useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 함
• React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되는 것을 하나의 API로 통합
• 실습

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

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

  // componentDidMount, componentDidUpdate와 비슷
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트!
    document.title = `clicked ${count} times`;
  });

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

• Effect 해제
  • 함수를 반환 (optional)
  • ex) 컴포넌트 - 친구의 접속 상태를 구독하는 effect 사용⇒ 구독을 해지함으로써 해제

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    
		return () => {
			 ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    };  
});
if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

• useEffect 컴포넌트 내에서 여러 개의 effect를 사용 할 수 있음
• Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 작성
  • class 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야 함

✌️HOOK 사용 규칙

1. 최상위에서만 호출
   • 반복문, 조건문, 중첩된 함수 내에서 hook 실행 금지
2. React 함수 컴포넌트 내에서만 hook을 호출
   • 일반 js 함수에서는 hook을 호출 하면 안됨

State Hook 사용하기

Hook이란?

• React의 useState Hook

import React, { useState } from 'react';
function Example() {
  // ...
}

state 변수 선언하기

• class를 사용할 때
  • constructor안에 this.state를 {count:0} 로 설정
  • count를 0으로 초기화

  class Exam extends React.component{
  	constructor(props){
  		super(props)
  		this.state={
  			count:0
  		}
  	}
  

• 함수형 컴포넌트
  • this를 가질 수 없음 ⇒ this.state를 할당하거나 읽을 수 없음
  • useState Hook을 직접 컴포넌트에 호출

  import React, { useState } from 'react';
  function Example() {
    // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
    const [count, setCount] = useState(0);
  

state 가져오기

• 클래스 컴포넌트
  • this.state.count 사용

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

• 함수형 컴포넌트
  • count 직접 사용

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

state 갱신하기

• 클래스 컴포넌트
  • this.setState() 호출

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

• 함수형 컴포넌트
  • setCount와 count 변수를 가지고 있으므로 this를 호출하지 않아도 됨

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

Effect Hook 사용하기

• 데이터 가져오기, 구독(subscription)설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것
• class 생명주기 메서드에서 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것

Hook을 사용하는 예시

• useEffect가 하는 일은?
  • React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행하는가
  • 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러냄
• useEffect를 컴포넌트 안에서 불러내는 이유는?
  • 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수(또는 어떤 prop)에 접근할 수 있음
  • 함수 범위안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있음
  • hook은 자바스크립트의 클로저를 이용하여 react에 한정된 API를 고안하는 것보다 자바스크립트가 이미 가지고 있는 방법을 이용해 문제 해결
• useEffect는 렌더링 이후에 매번 수행?
  • 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행
  • effect가 수행되는 시점에 이미 DOM 이 업데이트

Effect 정리

• 필요한 경우
  • 함수를 반환

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

• 필요 없는 경우
  • 반환하지 않음

useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

Effect의 최적화

• useEffect Hook API에 내재화
• 특정 값들이 리렌더링 시에 변경되지 않으면, react로 하여금 effect 건너 뛸 수 있음
  • useEffect 의 선택적 인수인 두 번째 인수로 배열을 넘김

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

useContext

• Context를 사용하면 전역적으로 데이터를 공유
  • 중간 다리 역할만 하는 컴포넌트들을 건너뛰고 데이터가 필요한 컴포넌트에서 바로 사용이 가능
• 리액트 Hook인 useContext는 이러한 Context를 좀 더 편하게 사용할 수 있게 해주는 역할
• useContext로 전달한 인자는 context 객체 그 자체이어야 함

import HeaderBar from '../components/header/HeaderBar'
import React,{useState,useEffect, useContext} from'react'

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

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

  useEffect(()=>{
    document.title = `clicked ${count} times`
  })

  return (
    <div className="App">
      <HeaderBar/>
      <p>clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>
        click
      </button>
      **<ThemeContext.Provider value={themes.dark}>
        <Tool/>
      </ThemeContext.Provider>**
    </div>
  );
}

function Tool(props){
  return(
    <div>
      <ThemedButton/>
    </div>
  )
}

function ThemedButton(){
  const theme = useContext(ThemeContext)
  return(
    <button style={{background:theme.background,color:theme.foreground}}>
      theme context
    </button>
  )
}
export default App;