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

 

 

 

리액트 훅 (React hook) 간단 정리

 

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

 

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

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

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

 

 

 

---

useState 

 

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

 

 

---

 

useEffect

 

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

 

 

---

 

useRef

 

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

 

---

 

memoization 관련 훅

 

useCallback

 

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

---

 

useMemo

 

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

 

 

 

 

---

 

 

 

 

https://github.com/chry8822

chry8822 - Overview

 

 

 

 

 

 

---