7. React (Hook 2)

내가 생각하는 핵심 키워드

: Memoization, .current(useRef)

 

 

useMemo

- 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션,

  재렌더링 시 불필요한 연산을 줄인다

 

- 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것을 권장

  (메모리의 한 공간을 계속해서 점유하고 있어야하기 때문에 잘못 사용시 성능 저하 이슈 발생)

 

- string, number 뿐만 아닌, object, array, function 등 모든 자바스크립트 연산 결과를 메모이제이션

 

 

[useMemo 사용 예시]

  const multi = useMemo(() => {
    return first * second
  }, [first, second])

first와 second가 변경될 때마다 useMemo가 호출되어야 한다

useMemo는 계산된 결과를 메모리에 저장, 재호출시 계산과정을 생략한다

 

setFirst(parseInt(event.target.value))

setSecond(parseInt(event.target.value))

parseInt는 자바스크립트에서 int형으로 바꿔주는 데이터 타입으로 입력값을 int형으로 저장

 

---

useCallback

- 함수를 메모이제이션하기 위해 사용하는 Hook

  컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지

 

- useMome(( ) => function, deps)와 useCallback(function, deps)는 같다

 

 

[useCallback 사용 예시]

useMemo와 useCallback은 동작방법이나 역할이 똑같다(그 대상이 함수로 바뀌었을 뿐)

동일하게 메모이제이션을 위해 사용하는 Hook이다

 

특별하게 다른점은 없으며, useMemo를 import하는 대신 useCallback을 import하여 사용

 

<div>{calc()}</div>

함수를 메모이제이션하기 때문에 변수가 아닌, 함수를 호출한다

---

useRef

- 컴포넌트 생명 주기(life cycle) 내에서 유지할 ref 객체를 반환한다

 

- ref객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다

  (.current = event.target(해당 이벤트의 주체)과 같은 Object)

 

- 일반적으로 React에서 DOM Element에 접근할 때 사용

  (DOM Element의 ref property을 이용한다)

 

- useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다

 

<input ref={inputRef} />
<button onClick={(e) => {
	alert(inputRef.current.value);

<input> Element에 ref의 값은 .current에 담기게 된다

(.current에 담기게 된 DOM Element는 event.target과 동일한 역할을 한다)

 

해당 Element는 이벤트가 발생했을 때 값의 변경을 반영해준다

(event가 발생했을만 React가 변화를 감지하고 변경점을 반영)

---

Custom Hook

Custom Hook은 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다

UI 요소의 재사용성을 올리기 위해 컴포넌트를 만든 것 처럼, 재사용성을 위해 사용한다

 

- 하나의 로직이 여러 번 사용될 경우 함수를 분리한 것 처럼 Hook을 만드는 역할

- 이름은 반드시 "use"로 시작해야 한다

- 하나의 Hook내에서 state는 공유되지 않는다

 

 

Custom Hook을 통해 값을 설정, 초깃값은 false

 

onClick이 일어날 때 toggle 호출