1. useEffect
바뀌는 것을 감지하여 어떠한 동작을 실행하도록 하기 위해 사용
useEffect(()=>{동작},[바뀌는 어떤 것])
useEffect(()=>{},[]) deps를 []으로 두면 처음 랜더링할때 한 번만 실행2. useCallback
원하는 타이밍에 호출시킬 함수를 만들기 위해 사용한다.(함수가 return된다.)
const [state, setState ] = useState('value')
const [fuc, setFuc] = useState(false)
useEffect(()=>{
if (fuc === true){
newState();
setFuc(false);
}
},[fuc])
const newState useCallback(()=>{
console.log(`New State : ${state}`)
},[state])- setFuc를 사용하면서 fuc는 true가 되지만, newState()가 동작 된 뒤
다시 false로 초기화 된다. - setState는 newState() 함수에만 영향을 주고 setFuc는 value 출력에만 관여한다.
3. useMemo
원하는 값을 업데이트하기 위해 사용
const person = useMemo(
() => (
<Person
name={name}
song={favoriteSong}
/>
),
[name, favoriteSong]
) - name, favoriteSong이 바뀌면 값을 새로 계산한다.
- name, favoriteSong이 바뀌지 않으면 값을 새로 계산하지 않고 기억해두었던 이전의 값을 사용함
- 렌더링 중에 실행됨
- useMemo를 사용하지 않아도 코드가 동작해야하며, 쓸데없는 리렌더를 줄이기 위해 사용(최적화)
INFP🖐