Hooks 란?

컴포넌트에서 데이터 관리를 하는것이 State
데이터가 변경될 때 상호작용을 할 때 Effect를 사용한다.
이런 useState가 바로 State Hook이다.

Hook은 React 함수 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use'로 시작해야 하며 최상위에서만 Hook을 호출할 수 있다.

const [username, setUsername] = useState('')

Hook의 종류 - useState

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

const [state이름, setState이름] = useState(초기값)

Hook의 종류 - useEffect

• Effect는 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.

useEffect(EffectCallback, Deps)

• Deps: 변경을 감지할 변수들의 집합(배열)
• EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수

useEffect(() => {
	console.log('버튼을 ${count}회 클릭한다.')
    },[count])

Hook의 종류 - useMemo

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

const fullName = useMemo(() => {
	return `${firstName} ${lastName}`
    }, [firstName, lastName])
}

Hook의 종류 - useCallback

• 함수를 메모리제이션하기 위해 사용하는 Hook
• 컴포넌트가 재렌더링될 떄 불필요하게 함수가 다시 생성되는 것을 방지한다.

const getfullName = useCallback(() => {
	return `${firstName} ${lastName}`
},[firstName, lastName])

Hook의 종류 - useRef

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

const inputRef = useRef(null)
const onButtonClick = () => {
	inputRef.current.focus()
}