[React] Hooks Tip

공부하면서 얻은 Hooks Tip!

Hooks Pattern

componentDidMount만 하고싶은 경우

useEffect(() => {
  // code
}, []);

두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다.

첫 렌더링 때 실행된다고 생각하면 된다.

componentDidUpdate만 하고싶은 경우

const mounted = useRef(false);
useEffect(()=>{
  if(!mounted.current){
    mounted.current=true;
  }else{
	// code
  }
},[])

첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidUpdate)에 실행되는 코드가 실행된다.

---

클래스와 Hooks의 Life Cycle 비교

 

클래스의 Life Cycle
	state1	state2	state3
componentDidMount	➡️	➡️	➡️
componentDidUpdate	➡️	➡️	➡️
componentWillUnmount	➡️	➡️	➡️

클래스는 하나의 생명주기가 모든 state를 관리할 수 있다.

Hooks의 Life Cycle
	state1	state2	state3
componentDidMount	⬇️	⬇️	⬇️
componentDidUpdate	⬇️	⬇️	⬇️
componentWillUnmount	⬇️	⬇️	⬇️

Hooks는 하나의 state가 모든 생명주기를 거칠 수 있다.

---

자주 사용하는 Hooks 깔끔 정리

useState

• 상태(state)를 useState()를 사용하여 관리할 수 있다.

useEffect

• 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있게 해준다.
• 두 번째 인자인 배열의 값이 변경 될 때마다 실행된다.

useRef

• 함수 컴포넌트에서 ref 를 쉽게 사용 할 있게 해준다. (ref : Reference)
• useRef 를 통해 만든 객체 안의 current 값이 실제 엘리먼트 를 가르키게 된다.
• DOM을 꼭 직접적으로 변경할 때 사용해야 한다.
  (특정 input에 focus추가, 스크롤박스 조작, Canvas요소에 그림그리기 등)

useMemo

• 함수컴포넌트가 재생성되도 함수를 생성하지 않고 함수의 리턴 값을 기억해 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.
• 두 번째 인자인 배열의 값이 변경 될 때마다 실행된다.

useCallback

• 함수 자체를 기억해 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진 경우 사용 할 수 있다.
• 두 번째 인자인 배열의 값이 변경 될 때마다 실행된다.
• 자식컴포넌트에 props로 함수를 전달할 경우, 반드시 useCallback을 사용한다.