리액트 React | Hook - useState, uesEffect, useRef, useCallback, useMemo

 

 

✅ Hook

리액트에서는 리렌더링 되는 조건들이 있는데 

 

1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다.

2. state (상태) 가 변경되면 리렌더링 된다.

3. props 가 변경되면 리렌더링 된다.

 

 

 

💡 useState 

 

 

💡 useState 

useState()가 호출되면 배열을 반환한다, [상태 값,  상태를 업데이트하는 함수]
렌더링과 관련된 상태를 관리하는 훅
state 가 갱신되면 리렌더링 된다
useState의 인자로 state의 초기값을 받을 수 있다.

 

💡 useEffect

useEffect(function, deps)
부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅
컴포넌트가 렌더링 될 때마다 특정 작업을 실행
의존성 배열(마운트 될때 업데이트 되었을때) 에 의해서 useEffect 가 작동한다.
마운트 될 때만 실행하고 싶은 때는 [] 빈 배열을
렌더링 될 때마다 실행하고 싶으면 빈 배열을 생략
cleanup 함수 반환 (useEffect에 대한 뒷정리 함수, return 뒤에 나오는 함수)
언마운트 될 때만 사용하고 싶을 때는 deps에 빈 배열을 넣어준다.
특정 값이 업데이트 되기 직전에 사용하고 싶은 때는 deps 배열에 검사할 대상의 값을 넣어준다.

 

💡 useRef

DOM을 선택해서 컨트롤할 수 있게 해주는 훅이다.
리렌더링 되지 않는다.
virtual dom이 아닌 실제 DOM을 건드린다.
current 속성을 가지고 있는 객체를 반환한다. 인자로 넘어온 초기값을 current 속성에 할당한다.

 

💡 useCallback

함수를 (메모이제이션) 하는 훅 (특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용)
useCallback을 사용하지 않았을 때는 리렌더링 될 때마다 함수가 생성된다.
이벤트를 등록하고 해제할 때 사용된다.
같음 함수라도 리렌더링으로 재생성된 함수는 맨처음 생성된 함수와 같은 함수가 아니다 그렇게 때문에 처음에 등록된 이벤트와 리렌더링 후에 등록된 이벤트의 이름과 내용이 같아도 같지 않기 때문에 해제가 안될 수 있다. 

 

💡 useMemo

특정 연산의 결과를 저장, 재사용하여 반복 계산을 하지 않게 만들어 최적화 효과를 볼 수 있다.