🔍 한눈에 알아보기

Hook

• React 16.8 부터 사용
• state, lifecycle, 최적화 등의 관련된 함수를 function component에서 사용하게 해줌
• 앞에 use를 붙여 표현

사용 규칙

1. 무조건 최상위 레벨에서만 호출 할 것
   • 반복문이나 if문 안에서 호출 할 수 없음
   • 이때문에 hook은 component가 렌더링 될 때마다 같은 순서로 호출 되어야함
2. React function component에서만 hook을 호출해야 함

   *참고: eslint-plugin-react-hooks
   정적 코드 분석 도구
   React 컴포넌트가 hook의 규칙을 따르고 있는지 확인, 강제

useState()

• state를 관리

// 사용 방법
const [변수명, set함수명] = useState(초기값);

// 사용 예시
const [count, setCount] = useState(0);

• 위 처럼 선언 후, useState() 호출 시 배열을 반환
  • 변수와 set함수를 반환

useEffect()

• 생명주기 함수와 동일한 기능 수행
• side effect를 수행

  Side Effect
  렌더링 이후에 발생하는/실행되는 작업

// 사용 방법
useEffect(effect 함수, 의존성 배열);

// 사용 예시
// `componentDidMount`, `componentDidUpdate`와 비슷하게 작동
useEffect(() => {
	// 탭 제목을 업데이트
	document.title = `Counter: ${count}`;
    // 'componentWillUnmount'와 비슷하게 작동
    return() => {
    	console.log("cleanup...");
    }
}, [count]); // 'count'가 업데이트 될 때 마다 실행

• 의존성 배열 생략:
  component가 업데이트 될 때 마다 실행
• 외존성 배열 언급:
  해당 배열안에 변수들 중 하나라도 값이 변경되면 실행
• 의종선 배열에 빈 배열 ( [ ] ):
  mount와 unmount 때만 실행

useMemo()

• 최적화를 위해 사용됨
• Memoized value를 return

  Memoized value
  비용이 높은 (연산량이 많은) 값

// 사용 방법
useMemo(memoization 함수, 의존성 배열);

// 사용 예시
const memoizedValue = useMemo(
	() => {
		// 비용이 높은 작업 수행 후 결과 반환
    	return computeExpensiveValue(var1, var2);
	}, [var1, var2]
);

• 렌더링 시간 단축
• 의존성 배열을 비우지 않고 무조건 변수를 언급해줌

useCallback()

• useMemo()와 유사하지만, 값이 아닌 함수를 반환

// 사용 방법
useCallback(callback 함수, 의존성 배열)

// 사용 예시
const callback = useCallback(() => {
	console.log("callback");
}, []) // mount와 unmount시에만 함수를 다시 선언

useRef()

• reference를 사용하기 위한 hook
• DOM element를 참조하기 위해 사용
• 지역 변수를 사용하기 위해 사용

  Reference
  특정 component에 접근 할 수 있는 객체

// 사용 방법
const refContainer = useRef(초깃값);

// 사용 예시 (DOM element를 참조)
const inputEl = useRef(null);
function onClick = e => {
	inputEl.current.focus(); // 아래에서 ref로 참조한 input을 focus
}

return(
	<input ref={inputEl}> // 'inputEl'이 이 input을 참조
    	입력란
    </input> 
    <button onClick={onClick}>Focus</button> // 클릭시 onClick 함수 호출
)

// 사용 예시 (지역 변수를 사용)
const number = useRef(1); // 'number'라는 지역변수를 생성, 값이 변해도 re-rendering되지 않음