리액트 훅(1)

• 리액트 훅이란? useState,useEffect 등 'use' 라는 접두사가 이름에 들어가는 일련의 함수   
• 도입 배경

 - 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. -> 함수로 분리

 - 복잡한 컴포넌트들은 이해하기 어렵다. -> 관련 로직을 함수로 묶음

 - 코드 작성이 다소 복잡하다 -> 클래스 문법에 비해 상대적으로 간단

 

용도	훅	설명
상태 관리	useState	컴포넌트 상태 관리
	useReducer	복잡한 상태 로직 관리
생명주기 대응	useEffect	사이드 이펙트 처리, 생명 주기 관련 작업
	useLayoutEffect	DOM 업데이트 후 동기적으로 실행할 작업을 수행
성능 최적화	useMemo	값 메모이제이션을 통해 불필요한 계산을 방지
	useCallback	함수 메모이제이션을 통해 불필요한 함수 재생성을 방지
DOM 접근 및 제어	useRef	DOM 요소나 컴포넌트 인스턴스 접근
	useImperativeHandle	부모 컴포넌트가 자식 컴포넌트의 인스턴스 메서드에 접근할 수 있게 함
컴포넌트 간 정보 공유	useContext	컴포넌트 트리 전체에 데이터를 공유

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

화살표로 함수 표현 가능

이제 자식 쪽으로 값을 넘겨주기\

 

자식에서 만들어 놓으면 다른 컴포넌트와 공유가 안되기에 

부모에서 state관리

 

 

 

파라미터 값을 넣어주지 않으면 mount를 할 때 아무것도 실행되지 않았으면 할 때

 

궁극적으로 업데이트가 될 때마다 어떤 것을 실행하고 싶을 때 혹은 실행하고 싶지 않을 때

useEffect 훅

//useEffect 예시
//src/APP.js


import './App.css';
import Controller from './component/Controller';
import Viewer from './component/Viewer';
import { useEffect, useState} from "react";
import refHook from './component/refHook';

function App() {
  const [count,setCount] = useState(0);
  
  
  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1 );
    
  const [text,setText]= useState("");
  
  const handleChangeText = (e) => {
   setText(e.target.value);
 };

  useEffect(() => {
    console.log("업데이트:", count, text);
    }, [count, text]);

 

 

useRef 훅 

 

- DOM 요소에 직접 접근할 때 자주 사용

- 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 훅

- 사용법

const ref = useRef(initialValue)

 

- State 변수 text로 관리하는 텍스트 입력 폼과 버튼 생성

 

 

import { useState, useRef } from "react";

function RefHook() {
  const [text, setText] = useState("");
  const textRef = useRef();
  const handleOnChange = (e) => {
    setText(e.target.value);
};
const handleOnClick = () => {
 alert(text);
 textRef.current.value = "";
};

return (
   <div>
     <input ref={textRef} value={text} onChange={handleOnChange} />
     <button onClick={handleOnClick}>작성 완료</button>
   </div>
 );
}

export default RefHook;

 

---

 

• 요약 

- 라이프 사이클 상에서 지점에 따라서 다르게 수행해야할 때는 useEffect

 

- 다른 외부적인 요소를 가져와서 참조 (렌더링과 상관없이) 해야 할 때에는 useRef