HOOK

State 컴포넌트의 상태

 

const [state, setState] = useState(초기값); <-요기서 state와 setState의 이름은 원하는데로 변경가능

state를 변경시키려면 setState함수를 이용해 변경

 

 

 

State의 time = 5 인 상태에서 setTime(6); 은 state값을 6으로 변경시킴 

 

useEffiect

 

useEffiect는 기본적으로 인자로 콜백함수를 받음

 

mount는 화면에 첫 렌더링 된 상태
update 다시 렌더링 될 때
unmount는 화면에서 사라질때

useEffect 함수는 React 컴포넌트가 렌더링 될 떄마다 특정 작업을 실행할 수 있도록 하는 Hook이다
useEffect는 컴포넌트가 mount 됐을 때, 컴포넌트가 unmount 됐을때, 컴포넌트가 update 됐을 떄 특정 작업을 처리 할 수 있따.

1. 첫 번째 형태는 렌더링 될 때 마다 실행

2. 두 번쨰 형태는 화면에 첫 렌더링 될때 or value값이 바뀔때 실행 

 

마지막 것은 첫 렌더링에서만 실행됨

 

 

useRef

기본형태

const ref = useRef(value)

 

 

useRef가 사용될 때!

1. 어떠한 값을 저장하는 저장공간으로 상태할 때

 

일반적으로 State에 변화가 발생하면 렌더링이 되고, 렌더링이 발생하면 컴포넌트 내부 변수들이 초기화 됨

 

이 때, Ref 안에 값을 저장할 경우 값을 변경해도 렌더링이 발생하지 않음 => 변수들의 값이 유지됨

 

State에 변화가 발생하고 렌더링이 되어도 Ref의 값은 그대로 유지됨

 

따라서 변경시 렌더링이 발생하면 안되는 값들을 저장할 때 사용함!!

 

2. DOM 요소에 접근

 

 

 

컴포넌트 최적화를 위해 사용되는 Hook => useMemo, useCallback

 

useMemo

useMemo에서 Memo란 Memoization

 

컴포넌트가 업데이트 되고 렌더링 될때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다
이런 경우 성능이 떨어지게 되는데, 이를 방지하기 위해 사용하는 것이 useMemo이다.

useMemo는 연산된 값을 렌더링 시 재사용할 떄 쓰인다

기본형태:
useMeMo(function, deps)

-function: 어떻게 연산할 지 정의하는 함수
-deps: 검사할 특정 값을 담은 배열( 배열안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용함)

 

useMemo는 꼭 필요할 때만 사용, 불필요한 값에는 사용하면 안됨 비효율적임.

 

useCallBack

 

useCallback은 useMemo를 기반으로 만들어진 Hook이다.
useMemo는 특정 결과값을 재사용 할 떄 쓰고, useCallback은 특정 함수를 재사용 할 떄 사용한다.

useCallback을 사용할 때 함수 안에서 사용하는 state, props가 있다면, 반드시 deps배열안에 포함시켜야한다.
그리고 컴포넌트에서 props로 함수를 받아왔따면 그 함수도 deps에 포함시켜야 한다
함수를 자식 컴포넌트에 props로 넘겨줄 떄는 항상 useCallback을 사용해야한다.
그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 계속 랜더링이 실행된다.

useCallback을 사용하지 않는 함수들은 컴포넌트가 리렌더링 될 떄마다 새로 만들어진다.
함수가 새로 만들어지는 것이 성능을 떨어뜨리지는 않지만 컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할때 함수를 재사용하는 것이 필요하다

useCallbak 사용법
기본형태:
useCallback(function, deps)

-function: 재사용할 함수
-deps: 검사할 특정 값을 담은 배열( 배열안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용함), 함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행