Hooks란?

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.
useState 또한 State Hook이다.

등장 배경

기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해, 반드시 클래스 컴포넌트를 사용했으나, 개발자가 느끼기에 복잡한 클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가되었다.

유의사항

const App = () => {
	const [username, setUsername] = useState('');
    	return (
        	<div>
            		<h1>{username}님 어서오세요.</h1>
           	</div>
        );
};

• Hook은 React 함수 (컴포넌트, Hook) 내에서만 사용이 가능하다.
• Hook의 이름은 반드시 'use'로 시작해야 한다.
• 최상위 Level에서만 Hook을 호출할 수 있다 (if문 혹은 for문, 콜백함수 내에서 호출 금지)

State Hook과 Effect Hook

State Hook

const App = () => {
	//일반적인 useState 사용법
    const [state이름, setState이름] = useState(초기값)
    // Array가 반환되고, 0번째 값은 현재값, 1번째는 값을 바꾸기 위한 또다른 함수
    // 즉, Hooks는 함수 쪼가리이다.
}

• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook
• 최초에 useState가 호출될 때, 초기값으로 설정되고 이후 재 렌더링이 될 경우 무시된다.
• state는 읽기 전용이므로 직접 수정하면 아니된다.
• state를 변경하기 위해서는 setState를 이용한다.
• state가 변경되면, 자동으로 컴포넌트가 재 렌더링된다.
  => setState함수를 호출할 때 state 값을 변경함과 동시 변경이 되었음을 react의 core에 알려주는 로직이 마지막에 호출되고 컴포넌트가 다시 렌더링됨.

const App = () => {
	const[title, setTitle] = useState('');
  
    // State를 변경할 값을 직접 입력하는 방법
   	setTitle('Hello');
  
    //현재 값을 매개변수로 받는 함수 선언 -> return 값이 state에 반영
    	setTitle((current)=>{
        	return current + 'world'l
        })
}

• state를 변경할 때는 setState함수에 직접 값을 넘겨주거나,
• 현재 값을 매개변수로 받는 함수를 전달한다. 이 함수에서 return 되는 값이 state에 반영된다.

Effect Hook

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

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

const App = () => {
	const [count, setCount] = useState(0)
    
    useEffect(() => {
    	console.log(`버튼을 ${count}회 클릭했습니다.`)
    }, [count])
    
    return (
    	<div>
            <button onClick={()=> setCount(count + 1)}>
            클릭하세요
            </button>
        </div>
    );
}

const App = () => {
	useEffect(()=>{
    	//state가 변경 될 때, 컴포넌트를 렌더링할 때 실행
    	const intervalId = setInterval(()=>{
        	console.log('안녕하세요');
        },1000);
        
        // 컴포넌트를 재 렌더링 하기 전에, 컴포넌트가 없어질 때 실행
        return () => {
        	clearInterval(intervalId);
        }
    }, []) // 없더라도 컴포넌트가 생성이 될 때 한번 실행되기 때문에
    	    //컴포넌트가 생성될 때, 한번만 실행하라는 의미
}

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

이외의 Hooks

useMemo

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

const App = () => {
	const [firstName, setFirstName] = useState('Alex');
    const [lastName, setLastName] = useState('Yoo');
	
    //이름과 성이 바뀔 때마다 풀네임을 메모이제이션함
    const fullName = useMemo(()=> {
    	return `${firstName} ${lastName}`;
    }, [firstName, lastName])
}

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

useCallbak

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

const App = () => {
	const [firstName, setFirstName] = useState('Alex');
    const [lastName, setLastName] = useState('Yoo');
	
    //이름과 성이 바뀔 때마다 풀네임을 return하는 함수를 메모이제이션
    const getfullName = useCallback(()=> {
    	return `${firstName} ${lastName}`;
    }, [firstName, lastName])
    return <>{getFullName()}</>
}

• 함수를 메모이제이션하는 Hook. 컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
• useMemo(()=> fn, deps) === useCallback(fn, deps)

useRef

const refContainer = useRef(initialValue);

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

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

사용자 정의 Hook

custom Hook

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

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

• 한 로직이 여러 번 사용될 경우 함수를 분리하는 것처럼 Hook을 만드는 개념이다.
• Hook의 이름은 'use'로 시작해야 컨벤션에 맞다.
• 한 Hook 내의 state는 공유되지 않는다.

한줄 평: 리액트 최신 문법에서 중요한 부분인 React Hooks 의 개념과 종류에 대해 배웠고 함수형 프로그래밍에 있어 익숙해지는 유익한 시간.