[week_08] React 기초 Ⅱ(2) Hooks

1. Hook

Hook은 컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 앞서 학습한 useState가 바로 State Hook이다. Hook은 클래스 컴포넌트(Class Component)를 보완하고, 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에서 추가되었다.

✨ Hook 유의사항

1) Hook은 React함수(컴포넌트, Hook) 내에서만 사용 가능하다.
2) Hook의 이름은 반드시 'use'로 시작해야 한다.
3) 최상위 Level에서만 Hook을 호출할 수 있다. 즉, 컴포넌트 내에서 Hook을 사용할 때 반드시 첫번째 중괄호({ }) 안에서만 사용해야 한다. (👉 if문, for문 안쪽 또는 콜백함수 내에서 호출하면 안된다.)

 

2. State Hook과 Effect Hook

2-1. State Hook

const App = () => {
	// 일반적인 useState 사용법
	const [state이름, setState이름] = useState(초기값)
}

• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다.
• 최초에 useState가 호출될 때 초기값으로 설정되며, 이후 재 렌더링이 될 경우 이 값은 무시된다.
• state는 읽기 전용이므로 직접 수정하면 안된다.
• state를 변경하기 위해서는 setState를 이용한다.
• state가 변경되면 자동으로 컴포넌트가 재 렌더링된다.

const App = () => {
	const [title, setTitle] = useState("");
    
    setTitle("Hello"); // State를 변경할 값을 직접 입력
    
    setTitle((current) => { // 또는 현재 값을 매개변수로 받는 함수 선언
    	return current + "World"; // return 값이 state에 반영된다.
    });
}

• state를 변경하기 위해서는 setState 함수에 직접 값을 입력하거나,
• 현재 값을 매개변수로 받는 함수를 전달한다. 이 때 함수에서 return되는 값이 state에 반영된다.

2-2. Effect Hook

const App = () => {
	useEffect(EffectCallback, [Deps])
}

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
• 즉, 어떠한 값이 변할 때 마다 내가 설정한 함수가 실행된다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Props가 변경될 때마다 EffectCallback함수가 호출된다.
• Deps: 변경을 감지할 변수들의 집합(배열)
• EffectCallback: Deps에 지정된 벼수가 변경될 때 실행할 함수

const App = () => {
	const [count, setCount] = useState(0);
    
    useEffect(() => {
    	console.log(`버튼을 ${count}회 클릭했습니다.`);
    }, [count]); // count의 state가 변경될 때 마다 첫 번째 인자의 함수 실행
    
    return (
    	<div>
        	<button onClick={() => setCount(count+1)}>
            	클릭하세요
            </button>
        </div>
    );
}

 

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.

const App = () => {
	useEffect(() => {
    	// State가 변경될 때, 컴포넌트를 렌더링할 때
    	const intervalId = setInterval(() => {
        	console.log('Hi');
        }, 1000);
        
        // 컴포넌트를 재 렌더링 하기 전에, 컴포넌트가 없어질 때
        return () => {
        	clearInterval(intervalId);
        }
    }, []); // 컴포넌트가 생성될 때 최초로 한번만 실행된다.
}

• useEffect의 이펙트 함수 내에서 다른 함수를 return할 경우 state가 변경되어 컴포넌트가 다시 렌더링되기 전과 컴포넌트가 없어질 때(Destroy) 호출할 함수를 지정하게 된다.

 

3. 이외의 Hooks

3-1. useMemo

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

• 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불펼요한 연산을 줄인다.
• useMemon의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것이 권장된다.

const App = () => {
	const [firstName, setFirstName] = useState('철수')
    const [lastName, setLastName] = useState('김')
    
    // 이름과 성이 바뀔 때마다 풀네임을 메모해둔다.
    const fullName = useMemo(() => {
    	return `${firstName} ${lastName}` // 리턴되는 값이 fullName에 들어간다.
    }, [firstName, lastName])
}

 

3-2. useCallback

const memoizedCallback = useCallback (
	() => {
    	doSomething(a, b);
    },
    [a, b]
);

• 함수를 메모이제이션하기 위해 사용하는 Hook이다. 컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
• useMemo가 변수를 메모하기 위해 존재하는 Hook이라면, useCallback은 함수를 메모하기 위해 존재하는 Hook이다.
• useMemo(() => fn, deps) 와 useCallback(fn, deps) 는 같다.

const App = () => {
	const [firstName, setFirstName] = useState('철수')
    const [lastName, setLastName] = useState('김')
    
    // 이름과 성이 바뀔 때마다 풀네임을 리턴하는 함수를 메모
    const getFullName = useCallback(() => {
    	return `${firstName} ${lastName}`
    }, [firstName, lastName]) // 함수가 반환된다.
    
    return <>{getFullName()}</> // 함수의 형태로 사용
}

 

3-3. useRef

const refContainer = useRef(initialValue);

• 컴포넌트 생애 주기(생명 주기) 내에서 유지할 ref 객체를 반환한다.
• ref 객체는 .current 라는 프로퍼티를 가지며, 이 값을 자유롭게 변경할 수 있다.
• 일반적으로 React에서 DOM Element에 접근할 때 사용한다. (DOM Element의 ref 속성을 이용)
• useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.

const App = () => {
	const inputRef = useRef(null)
    const onButtonClick = () => {
    	inputRef.current.focus()
    }
    return (
    	<div>
        	<input ref={inputRef} type="text" />
            <button onClick={onButtonClick}>input으로 포커스</button>
        </div>
    )
}

 

4. Custom Hook

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. UI 요소의 재사용성을 올리기 위해 컴포넌트를 만드는 것처럼, 로직의 재사용성을 높이기 위해서는 Custom Hook을 제작한다.

function useMyHook(args) {
	const [status, setStatus] = useState(null);
    // ...
    return status;
}

• 한 로직이 여러 번 사용될 경우 함수를 분리하는 것 처럼 Hook을 만드는 것일 뿐, 새로운 개념은 아니다.
• Hook의 이름은 'use'로 시작해야한다.
• 한 Hook 내의 state는 공유되지 않는다.