리액트 기본 Hook 개념정리

usestate    

상태를 관리할 수 있게 도와주는 기능

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 count 상태와 그 상태를 업데이트하는 setCount 함수를 가져옵니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

 

useRef

DOM 요소나 변수를 참조하고 관리하는 데 사용

import React, { useRef } from 'react';

function InputFocus() {
  // useRef 훅을 사용하여 input 요소를 참조합니다.
  const inputRef = useRef(null);

  const focusInput = () => {
    // input 요소에 포커스를 줍니다.
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default InputFocus;

useEffect

리액트의 라이프사이클을 컨트롤

 

마운트 시점에만

useEffect(() => {            //의존성 배열에 빈 배열을 넣고 할일을 콜백 함수에 작성
    console.log("Mount!");
},[]));

 

업데이트(리렌더링)

state가 변경 또는 부모에게 받는 props 변경 또는 부모컴포넌트가 리렌더링 

useEffect(() => {                  //의존성 배열에 아무것도 안넣고 할일을 콜백 함수에 작성
    console.log("Mount!");
});

useEffect(() => {                  //의존성 배열값이 바뀌면 할일을 콜백 함수에 작성
    console.log(`count is update : ${count}`);
    if( count>5){
    alert("count가 5를 넘었습니다 따라서 1로 초기화합니다");
    setCount(1);
    }
},[count]);

=> 감지하고 싶은 값만 감지해서 작업을 할 수 있다.

 

언마운트 시점

useEffect(() => {            //마운트를 제어하는 useEffect의 콜백 함수가 함수를 리턴      
    console.log("mount !!");
    return () => {
    // unmount 시점에 실행되게 됨
    console.log("Unmount !");
    };
},[]);