리액트 훅

✅리액트 훅 

리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다.

이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

Hook 규칙

1. 최상위에서만 Hook을 호출해야한다.

2. 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.

3. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다.

4. 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있게 된다. 2)

5. 리액트 함수 내에서만 Hook을 호출해야한다.

6. Hook은 일반적인 js 함수에서는 호출하면 안된다.

7. 함수형 컴포넌트나 custom hook에서는 호출 가능하다.

 

 

https://choijying21.tistory.com/60

https://ko.legacy.reactjs.org/docs/hooks-intro.html

 

훅 이름 설명

useState	이 훅은 함수 컴포넌트에 React 상태를 추가할 수 있게 해줍니다.
useEffect	이 훅은 함수 컴포넌트에서 사이드 이펙트를 수행할 수 있게 해줍니다. 이 훅은 React 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 사용됩니다.
useContext	이 훅은 중첩을 추가하지 않고도 React 컨텍스트에 구독할 수 있게 해줍니다.
useReducer	이 훅은 복잡한 상태 로직에서 useState보다 선호되는 경우가 많습니다. 여러 하위 값이 관련되거나 다음 상태가 이전 상태에 의존하는 복잡한 상태 로직에 사용됩니다.
useCallback	이 훅은 의존성 중 하나가 변경될 때에만 변경되는 메모이즈된 콜백 버전을 반환합니다. 이는 불필요한 렌더링을 방지하기 위해 참조 동등성을 기반으로 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.
useMemo	이 훅은 메모이즈된 값을 반환합니다. "생성" 함수와 의존성 배열을 전달합니다. useMemo는 의존성 중 하나가 변경될 때에만 메모이즈된 값을 다시 계산합니다.
useRef	이 훅은 전달된 인수(initialValue)로 초기화된 .current 속성을 갖는 가변적인 ref 객체를 생성하는 데 사용될 수 있습니다. 반환된 객체는 컴포넌트의 전체 수명 동안 유지됩니다.
useImperativeHandle	이 훅은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자 정의로 설정하는 데 사용됩니다.
useLayoutEffect	이 훅은 useEffect와 동일한 형태로 동작하지만 DOM 변경 후 동기적으로 발생합니다. 이를 사용하여 DOM에서 레이아웃을 읽고 동기적으로 다시 렌더링할 수 있습니다. useLayoutEffect 내에서 예약된 업데이트는 브라우저가 그려지기 전에 동기적으로 플러시됩니다.
useDebugValue	이 훅은 React DevTools에서 사용자 정의 훅의 레이블을 표시하는 데 사용될 수 있습니다.

 

 

 

 

 

 

---

사이드 이펙트를 제어하는 useEffect

  //1. 마운트 : 탄생 
  //2. 업데이터 : 변화, 리렌더링 
  //3. 언마운트 : 죽음 
	// 를 제어할 수 있는 useEffect

주요 기능

useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행하도록 합니다. 이 작업은 주로 데이터 페칭, 수동으로 DOM 업데이트, 구독 설정 등이 있습니다. 이 예제에서는 count와 input 값의 변경을 모니터링하여 콘솔에 로그를 출력합니다.

코드 설명

import './App.css'
import Viewer from "./components/viewer";
import Controller from "./components/Controller";
import Even from './components/Even'
import {useState,useEffect, useRef} from 'react';

function App() {
  const [count,setCount] = useState(0);
  const [input, setInput] = useState("");

  const isMount= useRef(false);

  //1. 마운트 : 탄생 
    // 최초로 한번 실행됨 의존성 배열에 빈 배열을 넣어주면 된다 
  useEffect(()=>{
  console.log('mount');
  },[])

  //2. 업데이터 : 변화, 리렌더링 
    // 의존성 배열을 생략하면 이 컴포넌트 update될 때 마다 실행
    // + 진찌 update시에만 호출하고 싶으면 flag용으로 useRef생성해서 활용 
    // useRef는 컴포넌트가 리렌더링되더라도 값이 유지되는 “변수”를 생성할 수 있습니다. 
  useEffect(()=>{
    if(!isMount.current){
      isMount.current=true;
      return;
    }
    console.log('update');
  })

  //3. 언마운트 : 죽음

  //의존성 배열 
  //dependency array
  //depth

  const onClickButton = (value) =>{
    setCount(count+value);
  };

  return (
    <div className="App">
      <h1>Simple Count</h1>
      <section>
        <input value={input} onChange={(e)=>{
          setInput(e.target.value);
        }}></input>
      </section>
      <sction>
        <Viewer count={count}/>
        {count % 2 === 0? <Even/> :null }
      </sction> 
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div> 
  );
}

export default App;
// -------------------------------------------------------
  //3. 언마운트 : 죽음 Event.jsx 
  // 최초에 짝수입니다 를 반환하게 얘가 사라질 때 console.log()에 찍히게 된다.
import {useEffect} from 'react';

const Even = () =>{
useEffect(()=>{
    //클린업, 정리함수 
    return ()=>{
        console.log("unmount");
    };
},[]);

    return <div>짝수입니다.</div>;
}

export default Even;

 

 

 

 

 

 

---

useState

= 현재 가지고 있는 상태나 모양을 정의 변화할 수 있는 동적인 값.

리액트의 컴포넌트들은 상태를 가질 수도 있다.

 

상태에 따라 다른 UI를 바뀌어서 다시 랜더링 될 수 있다.

컴포넌트가 다시 렌더링되는 상황= 리렌더 리렌더링

import './App.css'
import {useState} from "react";

function App() {
  const [count,setCount] = useState(0);
  console.log(state);
  return (
    <>
      <h1>{state}</h1>
      <button onClick={()=>{
        setCount(count + 1);
      }}>+</button>
    </>
  );
};

export default App

state Lifting (State 끌어올리기)

만약에 useState의 값을 어떤 곳에서 Viewer컴포넌트에서는 보여주고

Controller에서는 컨트롤 해야한다면 어떻게 해야할까? 그건 바로 상위 컴포넌트에서

useState를 만들어서전달해주면 된다.

 

 

 

 

1.리액트에서 화면을 구성할 때 여러개의 컴퍼넌트들이 부모와 자식 관계를 가지며 계층 관계를 가진다.

2.다른 컴포넌트에게 데이터를 전달하려면 부모자식관계를 가지고 있어야한다.
3. 부모에서 자식으로 단방향 관계를 가짐.

 

 

 

 

---

useRef는 리액트 훅 중 하나로, 주로 DOM 요소나 변수의 참조를 유지하는 데 사용됩니다. useRef를 사용하면, 참조하는 값이 변경되어도 컴포넌트가 재렌더링되지 않으며, 변경된 값을 그대로 유지할 수 있습니다.

주요 사용 용도는 다음과 같습니다:

1. DOM 요소 참조: 특정 DOM 요소에 직접 접근하거나 포커스를 설정할 때 사용합니다.
2. 값의 유지: 상태는 아니지만, 값이 변경되어도 재렌더링을 발생시키지 않고 값을 유지하고자 할 때 사용합니다.

 

 

 

 

 

 

 

---

useReduce

1. useReducer()는 useState()와 같은 상태 관리, 상태 업데이트 훅(Hook)이다.
2. 좀 더 구조화된 방식으로 상태를 관리하고 싶을 때 사용할 수 있다.

• dispatch : 상태(state)를 변경 시 필요한 정보를 전달하는 '함수' > 주문서
• reducer : dispatch를 확인해서 state를 변경해 주는 '함수' > 주방(공장)

https://ccomccomhan.tistory.com/281#google_vignette

[React] - useReducer()란 간단하고 쉽게 이해하기(예제코드, useReducer 사용예제)

// import문들 생략 

//초기데이터 설정
const mockData = [...]

//reducer
function reducer(state,action){
  switch(action.type){
    case 'CREATE':
      return [action.data,...state];
    case 'UPDATE':
      return state.map((item)=>
      item.id === action.targetId
      ? {...item, isDone: !item.isDone}
      : item
      );
    case 'DELETE':
      return state.filter(
        (item)=>item.id !== action.targetId
        );
    default:
      return state;
  }

}

function App() {
	//useReducer 호출 
  const [todos, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

    const onCreate =  (content)=>{
      dispatch({
        type:"CREATE",
        data:{
          id: idRef.current++,
          isDone:false,
          content:content,
          date: new Date().getTime(),
        },
      })
    };

    const onUpdate = (targetId)=>{
      dispatch({
        type:"UPDATE",
        targetId : targetId,
      })
    };
  
    const onDelete = (targetId)=>{
      dispatch({
        type: "DELETE",
        targetId:targetId
      })
    };
  
  return (
    <div className="App">
      <Header/>
      <Editor onCreate={onCreate}/>
      <List todos={todos}
      onUpdate={onUpdate} 
      onDelete={onDelete}/>
    </div>
  )
}

export default App

 

---

UseMemo

 

메모이제이션 = 뜻 : 기억해두기, 메모해두기 = 메모리에 값을 저장해 놓음.

 

1. 메모이제이션: useMemo는 메모이제이션된 값을 반환합니다. 메모이제이션은 동일한 입력에 대해 이미 계산된 결과를 기억해두고, 다시 계산하지 않는 최적화 기법입니다.
2. 의존성 배열:useMemo의 두 번째 인자로 의존성 배열을 전달합니다. 이 배열 안의 값이 변경될 때만 첫 번째 인자로 전달된 함수가 다시 실행되어 새로운 값을 계산합니다.

https://highero.tistory.com/entry/useMemo%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B4%85%EC%8B%9C%EB%8B%A4-Feat-%EC%98%88%EC%A0%9C

 

 

 

---

useCallback

첫 번째 인자를 반환, 두번째 인자는 deps

1. 메모이제이션된 콜백 함수:

• useCallback은 특정 콜백 함수의 참조를 메모이제이션합니다. 즉, 컴포넌트가 리렌더링될 때마다 함수가 새로 생성되는 것을 방지하고, 이전에 생성된 함수를 재사용합니다.

1. 의존성 배열:

• useCallback은 두 번째 인자로 의존성 배열을 받습니다. 이 배열에 명시된 값들이 변경될 때만 콜백 함수가 새롭게 생성됩니다.

• 의존성 배열이 빈 배열 []인 경우, 해당 함수는 처음 렌더링할 때만 생성되며, 이후로는 변경되지 않습니다.

https://goongoguma.github.io/2021/04/26/When-to-useMemo-and-useCallback/