[React] Hook의 종류 알아보기

** 자체적으로 제공하는 Hook이 있고, custom hook이 있음.
** Hook 사용시 use붙이기
** Hook 사용시 최상위에서만 호출할 것 (반복문, 조건문에서 호출 XX)

Hook의 규칙

Hooks API Reference✨

 

1. useState

const [state, setState] = useState(초기값);
 
//state : get
//setState : set

 

문제1. useState를 사용해서 button 클릭시 시간이 변경되게 하기

<1차 수정>

그림 1-1과 같이 지정하게 되면 클릭시 숫자가 계속 counting된다.

<최종 수정>

newTime이라는 새로운 변수를 만들고 12라는 숫자보다 크면 다시 1을 갱신해준다.

문제2. input에 값을 upload할때 누적되어서 보여지게 하기

예제

2-1. map을 통해 useState값의 개수만큼 보여지게 하기.

2-2. input안의 value값 체크해주기

빈 배열을 담아준 뒤 변경될 함수인 setInput에 value값을 담아준다.

😶names state값을 가져올때 무거운 작업을 실행하는 함수를 항상 실행해야 한다면?

(연산 , setTime 작업등)

작업 실행시 계속 불려지고 있는 함수

맨 처음 randering될때에만 무거운작업함수가 실행되도록 하기

callback함수로 바꾸어 준다

 

---

2. useEffect

• useEffect의 명칭은 함수의 핵심기능과 무관한 부가기능을 side Effect라고 하는데 여기에서 따온 것이라 함
• useEffect 내부 함수는 html 랜더링이 모두 끝난 뒤 useEffect가 실행된다.

useEffect를 사용해야 하는 경우는?
시간이 오래걸리는 기능의 경우
오래 걸리는 반복연산 값이 바뀌어야 하는 경우
서버에서 데이터를 가져오는 작업
타이머 기능 등등

 

업데이트 버튼을 눌렀을때에만 useEffect 적용이 되게 하려면

 

mount	화면에서의 첫 렌더링
update	렌더링될때
unmount	화면에서 사라질때
clean up

 

---

3. useCallback (compoment최적화 기능1/2)

첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될때까지 저장하고
재사용할 수 있게 해준다. 즉, 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 재사용할 수 있다.

useCallback의 동작 구조

1. component는 상태(state)가 변경될때마다 다시 그려진다.(rerendering)

2. component가 rendering될때마다 의존성 배열이 없는 함수는 항상 다시 생성(메모리에 할당)된다.

3. 만약 1초에 100번 그려지는 component가 존재할 경우 1초에 100개의 함수가 생성된다.

3-1. 3의 경우를 방지하기 위해 useCallback함수를 통해 방지한다.

4. 의존성 배열이 들어있는 state가 변경될때만 실행될 함수(첫번째 인자)가 재생성(메모리에 재할당)된다.

---

4. useMemo(compoment최적화 기능2/2)

useMemo에서 memo는 Memoization을 말한다.
메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

useMemo는 배열 내부 요소 값이  업뎃 될때만 콜백함수를 다시 호출해서 메모이제이션된 값을 업데이트해서 다시 메모이제이션해준다. 빈배열일 경우에는 컴포넌트가 mount되었을때의 값을 메모이제이션한 뒤 항상 그 값을 가진다.

함수는 component가 렌더링될때마다 모든 내부 변수가 초기화 된다.

 

4-1. 무거운 작업을 하는 함수와 가벼운 작업을 하는 함수가 같이 있는 component의 경우

<useMemo사용 전>

easyCalc를 클릭해도 빠르게 콘솔에 찍히지 않고 delay는 여전히 있다.

그 이유는 함수형 component이기 때문에 상태가 변하면서 hardCalc의 함수가 다시 초기화 되며 불리기 때문이다.

<useMemo사용>

 

4-2. 원시타입과 참조타입의 차이 알아보기

원시타입(좌)과  객체타입(우)이므로 location에서 상태가 변경될때  useEffect를 사용하려고 해도 계속 호출이 된다.

왜냐하면 객체는 메모리공간이 다르게 할당되며 보관이 된다.

그래서 useMemo의 의존성배열을 통해 isKorea의 상태가 바뀔때에만 useEffect호출을 해주도록 한다.

원시(primitive)타입	객체(object)타입
string Number Boolean Null Undefined BigInt Symbol	원시타입을 제외한 것들 Object Array function ...
const loction = 'korea' 메모리에 담긴다.	const location = {   country : 'korea' } 객체타입은 변수에 담지 않고 메모리공간이 할당되어 보관된다. 그리고 객체가 담긴 메모리주소가 부여된다.

useMemo를 사용해 isKorea의 값이 바뀔때에만 실행되도록 한다.

---

5. useRef

useRef는 rerendering되어도 기존 참조하고 있던 component의 함수 내 변수 값이 그대로 보존 된다.
중요!!! state 변화 및 rendering되도 Ref의 값은 유지된다.

 

state를 클릭했을때는 화면이 rendering되면서 counting된다.

그런데 Ref는 화면에서 rendering되지 않기 때문에 보이지는 않는다.

Ref Up 버튼을 클릭했을때 값이 저장되었다가 상태가 변경되는 state Up 버튼을 클릭하면 한번에 state가 변경된다.

 

useRef는 component가 변경되어도 Ref값을 유지한다(mount-> unmount까지)

 

5-1. useRef와 변수의 차이 확인하기

ref는 rendering되어도 값이 초기화되지 않는다.

 

5-2. input요소에 자동 포커스되게 하기

 

---

6. useContext

 

-useContext를 사용하면 component를 재사용하기 어려워질 수 있으므로 꼭 필요할때만!
-prop drilling을 피하기 위한 목적이라면 componentcomposition(컴포넌트 합성)을 고려해보자

6-1. useContext를 통해 하위 component들 에게 전달하기

부모에서 하위 component에게 props를 통해 데이터를 전달, 전달해주어야 한다.

<app.js>

useContext를 사용하려면 creatContext를 import해주기

Provider를 사용해 value에 props를 넣어주면 page에 넣지 않고도 접근이 가능하다.

log로 useContext를 찍어보면 props를 사용하지 않고 dark와 setIsDark가 가져와진것을 볼 수 있다.

 

 

**별코딩 강의를 참고하여 만들었습니다.

---

추가정리 예정

useReducer

useImperativeHandle

useLayoutEffect

useDebugValue