5주차 WIL (React Hook)

useState

// 현재 상태 값과 이를 업데이트할 수 있는 함수라는 두 가지 요소가 포함된 배열을 반환
const [count, setCount] = useState(0);

 

useEffect

// 의존성 배열의 값이 변경됐을 때 렌더링
useEffect(() => {

  return () => {
    // Cleanup code
  };
}, [dependencyArray]);

 

useContext

// 컨텍스트 객체(React.createContext에서 반환된 값)를 수락하고 해당 컨텍스트에 대한 현재 컨텍스트 값을 반환
const value = useContext(MyContext);

 

useCallback

// 종속성 배열 중 하나가 변경된 경우에만 변경되는 메모화된 버전의 콜백 함수를 반환
const memoizedCallback = useCallback(() => {
  // Your code here
}, [dependencyArray]);

 

useMemo

// 메모된 값을 반환
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

useRef

// DOM 요소에 엑세스 할 때 사용
function App() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus the input</button>
    </>
  );
}