📖 리액트 훅스

React hooks

useState

State란 컴포넌트가 가질 수 있는 상태를 의미한다. 예를 들어 시계 컴포넌트는 time을 상태로 가진다.

const [state, setState] = useState(초기값);

setState를 사용하여 state를 간편하게 바꿀 수 있다. state를 변경하면 재렌더링이 되어 화면이 업데이트 된다.

useEffect

1. Mount 화면에 첫 렌더링
2. Update 다시 렌더링
3. Unmount 화면에서 사라질

렌더링 될 때마다 실행

useEffect(()=>{
  //작업...
});

화면에 첫 렌더링 될 때, value값이 바뀔 때 실행

useEffect(()=>{
  //작업...
} [value]);

의존성 배열이 비어 있다면 화면에 첫 렌더링 될 때만 실행

clean Up - 정리 화면에 첫 렌더링 될 때, value값이 바뀔 때 실행

useEffect(()=>{
  //구독...
  return () => {
    //구독 해지...
  }
} [value]);

useRef

const ref = useRef(value)
//{current: value}

ref 오브젝트는 수정이 가능하다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 컴포넌트가 계속해서 렌더링 되어도 unmount되기 전 까지는 값을 그대로 유지.

• 어떠한 값을 저장하는 저장공간, 변경 시 렌더링을 발생시키지 말아야 할 값 state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화 ref의 변화 -> no 렌더링 -> 변수들의 값이 유지됨 state의 변화 -> 렌더링 -> 그래도 ref의 값은 유지됨

• DOM 요소에 접근 focus()

useContext

다양한 레벨에 있는 많은 컴포넌트에 전역적인 데이터를 전달하기 위함이다.

• Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수있다.
• Prip Drilling을 피하기 위한 목적이라면 컴포넌트 합성을 먼저 고려하자.

useMemo

Memoization: 동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 자주 사용하는 값을 맨 처음 계산할 때 캐시에 둬서 캐시에서 꺼내 사용.

function Component() {
  const value = useMemo( () => caculate(), []
  )

  return <div>{value}</div>
}

렌더링 -> Component 함수 호출, Memoization -> 렌더링 -> Component 함수 호출, Memoize된 값을 재사용

const value = useMemo( () => {
  return caculate
},[]);

꼭 필요할 때만

useCallback

• 컴포넌트 최적화

cosnt caculate = useCallback((num) => {
  return num + 1;
}, [item])

useReducer

복잡한 state를 다룰 때 useReducer가 편할 수 있다.

// reducer - state를 업데이트 하는 역할 (은행) // dispatch - state 업데이트를 위한 요구 // action - 요구의 내용

cosnt ACTION_TYPES = {
  deposit: "deposit",
  widthdraw: "withdraw"
}

const reducer = (sate, action) => {
  switch (action.type) {
    case ACTION.type.depisit:
        return state + action.payload  
    case ACTION.type.withdraw:
        return state - action.payload
    default:
      return satae;
  } 
}

function App() {
  const [money, dispatch] = useReducer(reducer, 0);

  return (
    <button onClick={()=>{dispatch({type: ACTION_TYPE.deposit, payload: number});}>
)
}

React.memo

컴포넌트의 렌더링 횟수를 제한. 부모 컴포넌튼가 변경되면 자식 컴포넌트도 재실행되는데 이제 props가 변경되는 경우에만 렌더링 되도록 최적화된 컴포넌트를 제공. prop check를 통해 재사용.

1.컴포넌트가 같은 props로 자주 렌더링될 때 2.컴포넌트가 렌더링이 될 때마다 복잡한 로직을 처리해야 한다

** 오직 props 변화에만 의존하는 최적화 방법이다. **

Custom Hooks

useInput

import {useInput} from "./useInput"

function displayMessage(message) {
  alert(message)
}

function App() {
  cosnt [inputValue, handleChange, handleSubmit] = useInput("", displayMessage)

  return (
    <input value={inputValue} onChange={handleChange} />
)
}

impoert {useState} from "react"

export function useInput(initialValue, submitAction) {
  const [inputValue, setInputValue] = useState(initialValue)
  cosnt handleChange = (e) => {
  setInputValue(e.target.value)
}

  const handleSubmit = () => {
    setInputValue("");
    submitAction(inputValue);
}

  return [inputValue, handleChange, handleSubmit]
}

useFetch

function App() {
  const { data: userData , fetchUrl } = useFetch(baeUrl), "users";
  const { data: postData , fetchUrl } = useFetch(baeUrl), "posts";
.

}
  useEffect(()=>{
    fetchUrl("users")   
},[])
  return (
    <div>
      <h1>useFetch</h1>
      <button onClick={()=>fetchUrl("users")}>Users</button>
      <button onClick={()=>fetchUrl("posts")}>posts</button>
      <button onClick={()=>fetchUrl("todos")}>todos</button>
    </div>
)
}

function useFetch(baseUrl, initialType) {
  const [data,setData] = useSatate(null);

  const fetchUrl = (type) => {
     fetch(baseUrl + "/" + type)
     .then(res => res.json()).then((res)=> setData(res)) 
  }

  useEffect(()=>{
    fetch(initialType)
  },[])

  return {
    date, fetchUrl,
  }
}