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
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;