[React] 리액트 훅(React Hooks)

1. 리액트 훅(Hooks) 및 종류

- 리액트가 함수 컴포넌트를 만들며 어떤 값을 유지할 수 있도록 "캐시"를 만들었다.

- 이 캐시를 이용하여 상태관리를 할 수 있도록 만든 여러개의 API를 훅(Hooks)라 한다.

- 즉, 초창기 함수 컴포넌트에서 상태 관리를 할 수 없었던 것을 리액트 훅을 이용해 클래스 컴포넌트에서의 상태관리가 가능하게 되었다.

종류	설명
useState	Hooks에서 state를 관리하기 위한 기술
useEffect	Component가 렌더링 되고 화면에 프린트 된 후에 발생
useLayoutEffect	Component가 렌더링 되고 화면에 프린트 되기 전에 발생
useMemo	기존에 수행한 연산의 결과 값을 어딘가에 저장해주고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
useCallback	특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
useRef	어떠한 특정 DOM을 직접 선택하여 포커스를 주거나 특정 엘리먼트의 크기나 색상을 변경하는 경우 사용

2. useState

- Component에서 사용되는 state와 동일한 기능으로 Hooks에서 state를 관리하기 위한 기술

const [count, setCount] = useState(1);
const [읽기용 값, 쓰기용 함수] = useState(초기값);

- useState를 사용하기 위해서는 위와 같이 import를 해줘야 한다.

- 첫번째는 사용할 때 변수, 두번째는 변경할 때 쓰는 함수이다.

3. useEffect

- 렌더링 이후에 필요한 경우 사용하며 렌더링 후 발생할 코드를 만들 수 있다.

useEffect(콜백함수, 의존성배열)

useEffect(() => {
       실행할 코드;
}, [감시할 대상])

• useEffect
  - useEffect는 생명주기 함수에서 componentMount와 같고
  - [] 의존성배열이 비어있으면 렌더링 후 무조건 실행이 한번만 되고 그 이후에는 실행되지 않는다.
  - [count] 안에 변수가 있으면 변수 값이 변경될 때마다 함수가 호출된다.
• useEffect(return문)
  - useEffect에 return 문이 있으면 그 return 문은 componentunMount와 같다.
  - return 문이 있을 때 [] 의존성배열이 비어있으면 컴포넌트가 제거될 때(unMount) return문이 호출된다.
  - return 문이 있을 때 [count] 안에 변수가 있으면 언마운트 때는 물론 그 변수가 업데이트 직전에 호출된다.

// 배열이 생략된다면 리렌더링 때마다 실행
useEffect(() => {
    if(count > 10) setCount(0)
})
// []가 비어있으면 렌더링 후 무조건 실행, 그 이후에는 실행되지 않는다.
// DidMount와 같은 의미
useEffect(() => {
    if(count > 10) setCount(0)
}, [])
// [감시대상] 가 있을 경우 해당 변수 값이 변경될 때마다 함수 호출(리렌더링)
useEffect(() => {
    if(count > 10) setCount(0)
}, [count])


// useEffect 안에 return 이 있으면 compoenetWillUnmount와 같이 행동된다.
// 컴포넌트가 unmonut 되거나 업데이트 되어서 리렌더링 될 때마다 호출된다.

// claenup 함수 반환
// 언마운트 될 때만 cleanup 함수를 하고 싶으면 배열을 빈값으로 선언
useEffect(() => {
    if(count > 10) setCount(0)
    return () => {
        console.log("aaa")
    }
}, [])
// 특정값이 업데이트 되기 직전 호출 하고 싶으면 배열에 특정 값을 넣으면 된다.
useEffect(() => {
    if(count > 10) setCount(0)
    return () => {
        console.log("aaa")
    }
}, [count])

- useState처럼 useEffect도 import를 해서 사용해야 한다.

- onClick 이벤트 함수를 통해서 count를 변경해서 렌더링 될 때마다 useEffect가 호출된다.

- useEffect의 의존성배열에 count가 있기 때문에 count가 변경될 때마다 호출되게 된다.

- 위 처럼 이벤트 안에서 if문을 이용해 setName을 해도 되지만 이렇게 되면 정상적으로 작동이 안되기 때문에 렌더링 이후 발생하는 함수인 useEffect를 사용하는 것이 좋다.

4. useRef

- useState()나 useEffect() 처럼 많이 쓰이지는 않지만 어떠한 특정 DOM을 직접 선택하여 포커스를 주거나 특정 엘리먼트의 크기나 색상을 변경하는 경우 사용

- 단, React 개념 또는 특징 상 특별한 경우를 제외하고는 DOM을 직접 접근하여 사용하는 것은 올바른 사용법이 아니라고 말하고 있다.

- 렌더링이 되고 리턴이 되고 나서 input을 접근할 방법이 없기 때문에 useRef를 통해서 접근을 한다.

- 접근하고 싶은 태그에 속성으로 ref로 useRef를 연결시켜줘야 한다.

- useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다.

- 그리고 .current 프로퍼티를 변경하더라도 이 것이 리렌더링을 발생시키진 않는다.

- 값이 변경되더라도 render를 발생시키지 않고, render 되더라도 값이 유지되는 특징을 가진다.

- 위에는 다음이나 이전을 클릭할 때마다 커서 포커스를 이동하는 useRef이다.

5. useMemo, useCallback, React.memo

• useMemo
  - 컴포넌트의 성능을 최적화 시킬 수 있는 대표적인 Hooks 기술 중 하나
  - Memo는 Momoization을 뜻하는 말로 기존에 수행한 연산의 결과 값을 어딘가에 저장해주고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다.
  
  사용 방법
  useMemo(콜백함수, 의존성배열)
  const value = useMemo(() => {
  return calculate();
  }. [item])
• useCallback
  - useMemo는 특정 결과값을 재사용할 때 사용하는 반면 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
  
  - 사용 방법
  useCallback(콜백함수, 의존성배열)
  const value = useCallback(() => {
         return calculate();
  }, [item])
• React.memo
  - 리액트에서는 변경된 바로 그 컴포넌트 DOM에 업데이트를 하게 해주는 memo 기능
  - 특정 부분을 기억하고 변경이 발생했을 때 이전 렌더와 변경된 렌더를 비교한다.
  - 만약 같다면 DOM을 업데이트 하지 않고 만약 다르다면 DOM을 업데이트한다.