[ React ] [Chapter 13] 리액트 내장 Hook

내장 Hook 종류

 

1.useState
배웠던거죠 하지만 한번 더! 상태값을 반환해줍니다. 첫번째 요소는 상태의 초기값을 두번째는 set함수를

const [ text, setText ] = useState('');

 

2.useEffect
이것도 배웠죠 부수효과 함수 컴포넌트가 사라질때 혹은 생겨날 때 그러한 부수효과가 나면 호출되는 훅

useEffect(() => {
	// 부수효과 후 처리 작업
});

 

3.useContent
이것도 배웠죠 Content를 생성 한다. 해당 props를 자식 컴포넌트한테 전달할때 거리가 긴 자식 컴포넌트한테 값 전달할 때 사용된다.

const TextContext = createContent('디폴트값');
return (
	<TextContent.Provider value={값} >
    	<Count />
    </TextContent.Provider>
);

// 자식
return (
	<UserContext.Consumer>
      {(it) => <p>{`${it} 님 ㅎㅇ`}</p>}
    </UserContext.Consumer>
);

 

4.useRef
ref객체를 생성해준다. 꼭 DOM 요소를 참조할 때만 사용할 수 있는건 아니다.

const inputRef = useRef();
return (
	<input type="text" ref={inputRef}
);

// 또는
const timerIdRef = useRef(-1);
const beforTextRef = useRef('이전값');
useEffect(() => {
	timerIdRef.current = setTimeout(() => {}, 1000);
});
// 이럴듯 꼭 DOM요소를 할 필요 없이 setTimeout이 반환한 ID값을 저장할때라던지
// 객체를 저장해야하는데 렌더링하면 안되는 특정 값을 저장해야한다던지 할 때도 사용된다.

 

5.useMemo
계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다. 첫번째 파라미터는 함수이고 두번째 파라미터는 의존성 배열이다. 함수의 반환값을 리액트가 기억하고 계산한 값이 변경 되었다면 그 값을 아니면 기존 값을 뿌려준다.

const [v1, setV1] = useState(0);
const [v2, setV2] = useState(0);
const value = useMemo(() => runExpensiveJob(v1, v2), [v1, v2]);
return (
<p>{`value is ${value}`}</p>
      <button
        onClick={() => {
          setV1(Math.random());
          setV2(Math.random());
        }}
      >
        v1 / v2 수정
      </button>
);

function runExpensiveJob(v1, v2) {
  console.log("runExpensiveJob is celled");
  return v1 + v2;
}

 

6.useCallback
이 훅은 useMemo훅과 비슷하다. 이 훅도 메모이제이션 기능을 이용하는데 함수 메모이제이션에 특화된 훅이다.
이 훅은 useMemo훅과 다른 점은 계산 함수가 아닌 해당 값이 변경 될 떄만 함수를 실행 시킨다.
만약 어떠한 함수를 자식 컴포넌트에 props로 onSave={() => saveToSend(name,age)} 넘길 때 name,age가 변경된것도 아닌데 랜더링이 발생 합니다. 해당 불필요한 랜더링을 없앨려면 아래와 같이 해야합니다.

const onSave = useCallback(() => saveToSend(name, age), [name, age]);
// 첫번째 변경될 때 실행할 함수, 두번째 의존성배열

 

7.useReducer
여러개의 상태값을 관리할 때 useReducer 훅을 사용하는게 좋다.
이 훅을 사용해 dispatch에 새롭게 넣은 객체에 값을 전달하고 함수에서 처리를 하는데 이렇게 상태값을 변경하는 로직을 분리할 수 있는게 큰 장점이다

const [ state, dispatch ] = useReducer(함수, 초기값);
// 첫번째 반환 요소는 상태값, 두번째 반환요소는 그 상태값을 set하는 함수

return (
	<input onChange={e => dispatch({ 새롭게 넣을 객체:값}) />
);

function 함수(state, action) {
	// state는 이전 상태값들
    // action는 해당 함수를 불러들일 때 넣는 객채 값
}

 

8.useImperativeHandle
클래스형 컴포넌트의 부모 컴포넌트는 ref객체를 통해서 자식 컴포넌트의 메서드를 호출할 수 있는데 이 방식은 자식 컴포넌트의 내부 구현에 대한 의존성이 생기므로 지양하는게 맞지만 종종 필요한 경우가 있다. 그럴 때 이 훅을 사용하면 함수형 컴포넌트에도 멤버 변수나 멤버 함수가 있는것처럼 만들 수 있다.

import React, { forwardRef, useImperativeHandle, useState } from "react";

function Home(_, ref) {
  const [name, setName] = useState("itjava");
  const [age, setAge] = useState(0);

// 첫번째 요소는 넘겨 받은 ref객체, 두번째는 함수
// 함수에서 정의한 객체를 부모컴포넌트에서 쓸 수 있다.
  useImperativeHandle(ref, () => ({
    addAge: (value) => setAge(age + value),
    getNameLength: () => name.length,
  }));
  return (
    <div>
      <h2>{`name is ${name}`}</h2>
      <h2>{`age is ${age}`}</h2>
    </div>
  );
}

export default forwardRef(Home);

import React, { useRef } from "react";
import Home from "./Home";

function App() {
// useRef 객체를 이용해서 Home 컴포넌트의 ref 속성값으로 던져줬다
// 던져줘서 homeRef.current는 이전에 자식 컴포넌트에서 훅 함수로 반환한 값을 참조하게 됩니다
  const homeRef = useRef();
  const onClick = () => {
    if (homeRef.current) {
      console.log("current name length: ", homeRef.current.getNameLength());
      homeRef.current.addAge(5);
    }
  };
  return (
    <div>
      <Home ref={homeRef} />
      <button onClick={onClick}>add age 5</button>
    </div>
  );
}

export default App;

 

9.useLayoutEffect
지금까지 useEffect훅을 많이 사용했는데 useEffect 훅을 많이 사용했는데 useEffect훅에 입력된 부수효과 함수는 렌더링 결과가 DOM에 반영된 후에 비동기로 호출이 된다. 하지만 useLayoutEffect 훅은 useEffect훅과 거의 비슷하게 동작은 하지만 부수효과 함수를 동기로 호출 한다는 점이 다르다. 그래서 특별한 이점이 있는게 아니면 useEffect 사용하는게 성능상 이점이 있다.

const [width, setWidth] = useState(200);
// useEfect와 사용 방법은 같다 다만 동기로 동작한다.
  useLayoutEffect(() => {
    if (width > 500) {
      setWidth(500);
    }
  }, [width]);

 

10.useDebugValue
리액트 개발자 도구에 좀 더 풍부한 정보를 제공한다. 디버깅할 때 편리하다. 대부분 커스텀 훅 제작할 때 그 훅에 대한 디버깅으로 많이들 쓴다.

useDebugValue(함수);
useDebugValue(
	state === 1 ? 'start' : start === 2 ? 'run' : 'stop'
);

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~