Hook
: React 16.8버전 이상에서 사용 가능한 라이브러리, 함수 컴포넌트의 State와 Lifecycle등을 관리하기 위해 사용됩니다.
Hook의 규칙
1) 함수명이 use로 시작한다.
2) 최상위 레벨에서만 호출해야한다. (조건문, 반복문등 안에 넣으면 안된다.)
3) 리액트 함수 컴포넌트에서만 호출해야한다.
Custom Hook
: 여러 컴포넌트에서 동일하게 사용할 Hook을 하나의 파일로 만들어 로직을 재사용할 수 있습니다.
- Hook의 규칙에 따라 use로 시작하는 명칭을 사용합니다.
1) 사용할 state와 function을 정의하여 반환합니다.
// JSX import React, {useState} from "react"; function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount(count + 1); const decreaseCount = () => setCount(Math.max(count-1, 0)); return [count, increaseCount, decreaseCount]; } export default useCounter;
2) 사용하는 component에서 import하여 반환값에 맞게 변수에 할당합니다.
// JSX import React, {useEffect, useState} from "react"; import useCounter from "./useCounter"; function Accommodate(props){ const [count, increaseCount, decreaseCount] = useCounter(0); ~~~ } export default Accommodate;
useState()
: state 사용을 위한 Hook
1) state의 선언
const [변수명, set변수명] = useState(초기값);
// JSX const [count, setCount] = useState(0);
- Hook의 useState()는 [state, setState()] 배열을 반환합니다.
- state는 사용자가 직접 값을 변경하면 안되고 set함수를 이용해야합니다.
이를 방지하기 위해 let이 아닌 const로 state를 선언합니다.
2) state의 값 변경
setState(변경 값)
// JSX setCount(count+1)
- 선언한 set함수를 사용해 값을 변경합니다.
- 클래스형과는 달리 state 각각에 set함수가 따로 존재합니다
3) prev
아래와 같이 연속 호출 시 올바른 값을 출력할 수 없습니다.
// JSX setCount(count+1); setCount(count+1);
- state를 변화시키는 setter함수는 비동기처럼 동작해 바로 상태변수의 변화를 반영하지 못합니다.
- set함수를 컴포넌트 내에서 여러번 호출 시 변경값에 다시 set되는게 아닌 초기값을 가져와서 연산되어 올바른 연산이 이루어지지 않습니다.
setState((prev)=>(변경값));
// JSX setCount((prev)=>(count + 1));
- setState의 prev값은 state의 이전값을 반환합니다.
4. useState 사용 예시
버튼을 눌러 1씩 증가시키는 component
// JSX import React, { useState } from "react"; function Counter(props){ const [count, setCount] = useState(0); return( <div> <p>{count}</p> <button onClick={() => setCount(count+1)}>+</button> </div> ); };
useEffect()
: Lifecycle을 관리하기 위한 Hook
1) useEffect() 사용법
// JSX useEffect(()=>{ // 이펙트 함수 }, [의존성 배열]);
- 이펙트함수 : 렌더링될 때 실행될 내용입니다.
- 의존성배열 : 배열안의 값이 변경될 때 이펙트함수가 실행됩니다.
2) useEffect(func, []);
// JSX useEffect(()=>{ document.title = `총 ${count}회 클릭되었습니다.`; }, []);
- component가 mount, unmount시 단 한번씩만 실행됩니다.
3) useEffect(func);
// JSX useEffect(()=>{ document.title = `${count}회 클릭되었습니다.`; });
- component가 mount되거나 업데이트 될 때 마다 실행됩니다.
componentDidMount()와componentDidUpdate()가 합성된 형태입니다.
3) useEffect( return () => {} );
// JSX useEffect(()=>{ ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange); return () => { ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange); } });
- component가 unmount 될 때 실행되는 구문입니다.
componentWillUnmount()와 같은 형태입니다.
useMemo()
: Memoized value를 리턴합니다.
1) Memoization
: 연산의 결과값을 저장해두고 같은 입력값으로 함수가 실행될 시 저장해둔 결과값을 반환합니다.
- 연산량이 높은 함수의 잦은 호출 시 최적화를 위해 사용합니다.
2) useMemo() 사용법
// JSX const memoizedValue = useMemo(() => { return (의존성 변수) => { }; }, [의존성 변수]);
-
memoizedValue를 생성하는 create 함수는 렌더링이 일어나는 동안 실행됩니다.
렌더링이 일어나는동안 실행되서는 안될 함수를 사용하지 않게 주의합니다. -
의존성 배열을 생략하면 렌더링 될때 마다 함수가 실행됩니다.
이 경우 useMemo()를 사용하는 의미가 없습니다.
useCallback()
: useMemo()와 비슷한 역할을 하며 함수를 반환합니다.
- useMemo( ()=>함수, [] )와 동일한 기능을 합니다.
1) useCallback() 사용법
// JSX const exFunc = useCallback(() => { return ~~ }, [의존성 변수]);
-
자식 컴포넌트로 function을 전달하는 경우 부모 컴포넌트에서 렌더링이 일어날 때 function이 다시 선언되어 전달되기 때문에 전달받은 자식 컴포넌트도 렌더링이 일어납니다.
-
function의 선언을 Memoization화하여 자식 컴포넌트에게 전달해 불필요한 렌더링을 막게 됩니다.
useContext()
: context.Consumer의 역할을 간편하게 사용하기 위해 사용됩니다.
// JSX function Profile() { const theme = useContext(ThemeContext); const user = useContext(UserContext); return ( ~~ ); }
- Context의 value값을 반환합니다.
- useContext의 파라미터로 Context 객체를 넣어 사용합니다.
