React의 Hook 함수 설명

1. useState

- 컴포넌트에서 바뀌는 값을 관리하며, 값이 바뀐 것을 감지 후 랜더링 해주는 Hook의 상태관리 함수.

const [state, setState] = useState(0);

// typescript
const [state, setState] = useState<number>(0);

 

2. useRef

- javascript의 getElementById / querySelector 와 같이 DOM Selector 함수처럼 react 에서 DOM에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hook 함수.

const inputRef = useRef();
<input ... ref={inputRef} />

// typescript
const inputRef = useRef<HTMLInputElement | null>(null);
<input ... ref={inputRef} />

 

3. useEffect

- 마운트(화면이 처음 랜더링 될 때)와 언마운트(화면이 사라질 때) 시 특정 작업(함수나 이벤트)을 실행할 때 사용하는 Hook 함수.

useEffect(() => {
  console.log('마운트');
  
  return () => {
    console.log('언마운트');
  }
}, []);

* [ ] 의존성 배열에 들어간 변수가 변경될 때 마운트, 비어있으면 첫 랜더링 시에만 마운트

 

4. useMemo

- 연산된 값(결과)을 반환하여 재사용할 수 있게 해주는 Hook 함수.

useMemo(() => console.log(`색상은 ${color} 입니다.`), [color]);

 

5. useCallback

- 특정 함수를 새로 만들지 않고 재사용할 수 있게 해주는 Hook 함수.

const [color, setColor] = useState("red");
const changeColor = useCallback(() => {
  setColor("blue");
  console.log("색상 변경");
}, []);

 

* 메모이제이션(memoization)

  - 값이 안바뀌는 연산이나 함수를 랜더링이 되더라도 재 생성하지 않도록 값이나 함수를 재사용.

  - 즉, 랜더링 시 필요없는 연산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술.