1.Hooks
01. Hooks 개요
Hook이란?
- 컴포넌트에서 데이터를 관리하고 데이터가 변경될 때 상호작용 하기 위해 사용함.
- useState가 바로 State Hook.
탄생 배경
- 기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 Class Component를 사용하였어야 함.
그러나 클래스컴포넌트는 다소 복잡하여 이를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 추가된 것이 Hook.
유의사항
- Hook은 리액트 함수에서만 사용 가능(컴포넌트, Hook 내에서만 사용 가능)
- Hook의 이름은 반드시 'use'로 시작.
- 최상위 Level에서만 Hook 호출 가능 (if, for문 안쪽 혹은 콜백함수에서 호출하면 안됨.)
02. State Hook과 Effect Hook
State Hook
const App = () => {
const [state, setState] = useState(초기값)
}- useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook
- 최초 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시됨.
- state는 읽기전용이므로 직접 수정하면 안됨
- state를 변경할 때는 setStatet사용
- state가 변경되면 자동으로 컴포넌트가 재 렌더링 됨.
Effect Hook
const App = () => {
useEffect(EffectCallback, Deps?)
}- Effect Hook을 사용하면 함수 컴포넌트에서 side Effect를 수행할 수 있음.
- 컴포넌트가 최초로 렌더링 될 때, 지정한 State나 Prop이 변경될 때 마다 이펙트 콜백 함수가 호출됨.
- Deps: 변경을 감지할 변수들의 집합 (배열)
- EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수
cosnt App = () => {
const [count, seCount] = useState(0)
useEffect(()=>{
console.log(`버튼을 ${count}회 클릭했습니다`)
},[count])
}
return (
<div>
<button onClick={() => setCount(count + 1)}>
</button>
</div>
)- 컴포넌트가 최초로 렌더링 될 때, 지정한 State나 Prop이 변경될 때 마다 이펙트 콜백 함수가 호출됨.
const App = () => {
useEffect(()=> {
//state가 변경될 때, 컴포넌트를 렌더링 할 때
const intervalId = setInterval(() => {
console.log('안녕하세요');
}, 1000);
//컴포넌트를 재 렌더링 하기 전에, 컴포넌트가 없어질 떄
return () => {
clearInterval(intervalId)
}
}, [])
...- useEffect의 이펙트 함수 내에서 다른 함수를 return 할 경우 state가 변경되어 컴포넌트가 다시 렌더링되기 전과 컴포넌트가 없어질 때 호출할 함수를 지정하게 됨.
03. 이외의 Hooks
다양한 내장 Hook
useMemo
//useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a,b), [a,b])
----------------------------
const App = () => {
const [firstName, setFirstName] = useState('철수')
const [lastName, setLastName] = useState('김')
//이름과 성이 바뀔 때 마다 풀네임을 메모이제이션
const fullName = useMemo(() => {
retrun `${firstName} ${lastName}`
}, [firstName, lastName])
}- 저장한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산 값을 줄임.
- useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 오래 걸리는 로직을 작성하지 않는 것이 권장됨.
useCallback
//useCallback
const App = () => {
const [firstName, setFirstName] = useState('철수')
const [lastName, setLastName] = useState('김')
//이름과 성이 바뀔 때 마다 풀네임을 return하는 함수를 메모이제이션
const getFullName = useCallback(() => {
retrun `${firstName} ${lastName}`
}, [firstName, lastName])
return <>{getFullName()}</>
}- 함수를 메모이제이션 하기 위해 사용하는 Hook.
- 컴포넌트가 재렌더링 될 때 불필요하게 함수가 다시 생성되는 것을 방지함.
useMemo(() => fn.deps)와 useCallback(fn, deps)는 같음.
useRef
const App = () => {
const inputRef = useRef(null)
const onButtonClick = () => {inputRef.current.focus()}
return (
<div>
<input ref = {inputRef} type = "text"/>
<button onClick = {onButtonClick}>
input으로 focus
</button>
</div>
)
}- 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환함.
- ref 객체는 .current 라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있음.
- 일반적으로 React에서 DOM Element에 접근할 때 사용함. (DOM Element의 ref속성을 이용함.)
- useRef에 의해 반환된 ref객체가 변경되어도 컴포넌트가 재렌더링되지 않음.
04. 나만의 Hook 만들기
custom Hook
function useMyHook(args){
const [status, setStatus] = useState(null);
//...
return status
}- 로직의 재사용성을 높이기 위해서 Custom Hook 제작
- Hook의 이름은 'use'로 시작해야함.
- 한 Hook 내의 state는 공유되지 않음.
백엔드개발자