React 라이브러리에서 제공하는 기본 내장 API 함수에 대해 (ex. useEffect, useCallback)

usestate

컴포넌트의 상태(state)를 관리 하는 함수로 상태가 변경되면 React에서 이를 감지하고 바뀐 정보에 따라 화면을 보여준다. 하나의 usestate함수는 하나의 상태값만 관리 할 수 있으며 만약 컴포넌트에서 관리해야 할 상태가 여러개라면 usestate를 여러번 호출해야한다.

 

useEffect

컴포넌트가 랜더링 될 때마다, 특정기능이 작동하도록 하는 hook이다.

useEffect(() => {
 console.log('마운트 될 때 실행된다.')
}, [])

마운트란? Mount란 DOM객체가 생성되고 브라우저에 나타나게 되는것을 뜻한다. 

useEffect(() => {
 console.log('리렌더링 될 때 마다 실행된다.')
})

뒤에 배열을 생략하게 된다면 리렌더링 될 때마다 실행한다. 

useEffect(() => {
 console.log(update)
 console.log('업데이트 될 때 마다 실행이 된다.')
},[update])

업데이트 될 때마다 실행된다. 단, 마운트될 때도 실행된다는 특징이 있다.

 

useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. (useMemo랑 헷갈릴 수 있지만 다르다.)

 

usememo

memoization된 함수를 실행하고 "값"을 반환

* memoization: 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 
꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법

usecallback

memoization된 "함수"를 반환
useMemo가 함수를 실행해버린다면 usecallback은 함수자체를 반환한다.