[React] Hooks

useState

• 가장 기본적인 Hook
• 함수 컴포넌트에서 상태 관리를 할 때 사용

const [value, setValue] = useState(0);

• 첫번째 원소 (value) : 상태 값
• 두번째 원소 (setValue) : 상태를 설정하는 함수
  • 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨

useEffect

• 리액트 컴포넌트가 렌더링(나타날 때)될 때마다 특정 작업을 수행하도록 설정
• 클래스형 컴포넌트의 componentDidMount + componentDidUpdate 

useEffect(() => {
	console.log("렌더링 완료");
    console.log({
    	name,
        nickname
    });
});

• 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않는 경우

useEffect(() => {
	console.log("렌더링 될 때 O, 업데이트 될 때 X");
}, []);

• 특정값이 업데이트될 때만 실행하는 경우
  • 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어줌

useEffect(() => {
	console.log(name);
}, [name]);

useReducer

• 컴포넌트의 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있음
  • 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용

const [state, dispatch] = useReducer(reducer, initialState);

• state : 현재 상태
• dispatch : action을 발생시키는 함수
• reducer : state와 action을 받아 새로운 state를 반환하는 함수
• initialState : 초기값

useReducer	useState
컴포넌트에서 관리하는 값(state)이 여러개일 경우	컴포넌트에서 관리하는 값이 1개일 경우
현재는 단일 state 값만 관리하지만, 추후 유동적일 가능성이 있는 경우	그 값(state)이 단순한 숫자, 문자열, boolean일 경우
스케일이 큰 프로젝트의 경우

useMemo

• 함수 컴포넌트 내부에서 발생하는 연산을 최적화
• 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
• 렌더링 → 함수 호출 → memorize된 함수 재사용

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• memoizedValue라는 저장해야될 값을 선언하고 의존성 배열에 a와 b값을 넣어 a, b의 변경 여부를 확인
• 변경 시 computeExpensiveValue를 이용해 연산된 값을 memoizedValue에 대입

useCallback

• 렌더링 성능을 최적화해야 하는 상황에서 사용
• useMemo는 특정 결과값을 재사용, useCallback은 특정 함수를 재사용

const memoizedCallback = useCallback(function, deps);

• 첫번째 파라미터 : 생성하고 싶은 함수
• 두번째 파라미터 : 배열 (어떤 값이 바뀌었을 때 함수를 새로 생성해야하는지 명시)
• function을 deps 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용

• smartHome 컴포넌트가 렌더링될 때 마다  toggle함수들의 참조값이 바뀌기 때문에 모든 light 컴포넌트가 리렌더링됨
• 이를 해결하기 위해 useCallback 사용

useRef

• 특정 DOM을 선택 가능

import React, { useState, useRef } from "react";

function UseRef() {
  const [text, setText] = useState("");

  const textInput = useRef(); // Ref 객체 생성

  const displayText = (e) => {
    setText(e.target.value);
  };

// 선택하고자 하는 DOM에 포커스 하는 focus() DOM API를 호출
  const onReset = () => {
    setText("");
    textInput.current.focus();
  };

  return (
    <div>
  <!-- 생성한 Ref 객체를 선택하고자 하는 DOM의 ref값으로 설정하면 
  	Ref 객체의 .current값은 선택하고자하는 DOM을 가리킴. -->
      <input onChange={displayText} value={text} ref={textInput} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
}

export default UseRef;