Hook의 등장배경

기존에는컴포넌트내에서State와생명주기(life-cycle)를관리하기위해서반드시클래스컴포넌트를사용
개발자가느끼기에복잡한클래스컴포넌트를보완하고함수컴포넌트에서도사용가능하도록만들기위해16.8 버전에추가된것이Hook.

Hook은 컴포넌트에서 데이터를 관리하고
데이터가 변경될 때 상호작용을 하기 위해 사용합니다.
Hook은 react함수 내에서만 사용이가능하다 Hook은 반드시 'use'로 시작해야한다
최상위 Level에서만 Hook을 호출 할 수 있습니다.

State Hook

	const App = () => {
    	const [state이름, setState이름] = useState(초기값)
    }

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

setState는 직접 값을 입력해도되지만
현재 값을 매개변수로 받는 함수를 전달 해도 됩니다 return되는 값이 state에 반영이된다

	setTitle((current) => {
      return current + "World";
      )

Effect Hook

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

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

컴포넌트를 재 렌더링 하기 전에 컴포넌트가 없어질 때 실행될 콜백함수도 넘겨줄 수 있다

예시

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

useMemo

지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모제이션 하여서
재렌더링시 불필요한 연산을 줄인다

useMemo의 연산은 렌더링 단계에서 이루어지므로 렌더링 과정과 무관하게 시간이 오래 걸리는 로직을 작성하지않는게 좋다

	const App(){
    	const [firName, setFirName] = useState()
        const [lastName, setlastName] = useState()
        const fullName = useMemo(() => {
        	return `${firName} ${lastName}`
        },[firName, lastname])
    }

useCallback

함수를 메모제이션 하기위해 사용됩니다
useMemo와 비슷하다

useMemo(() => fn,deps) == useCallback(fn,deps)

useMemo는 deps가 바뀔때마다 리턴값을 메모제이션
useCallback은 deps가 바뀔때 마다 리턴하는 함수를 저장

useRef

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

const App = () => {
    const inputRef = useRef()

    return(
        <div>
            <input ref={inputRef}/>
            <button onClick={() => alert(inputRef.current.value)}/>
        </div>
    )
}

input에 ref로 위에서 만들었던 inputRef를 넣어주고 버튼 클릭시에 inputRef.current.value값을 alert로 출력하는 예문입니다