React Hook

각각의 컴포넌트에는 라이프사이클 (컴포넌트의 수명주기) 이 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

라이프사이클은 크게 3가지로 생성될 때 (마운트), 업데이트할 때 (업데이트), 제거할 때 (언마운트)로 나뉜다. 

업데이트는 다음의 4가지 상황에서 발생한다.

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링 될 때
• this.forceUpdate로 강제로 렌더링을 할 

 

useState

• 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. useState를 사용하여 상태를 관리할 수 있다.
• useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출한다. 이 함수를 호출하면 [state 변수, setter 함수]의 배열이 반환된다.

 

useEffect

• 컴포넌트가 렌더링 될 때와 업데이트 될 때, 클래스형 컴포넌트의 componentDidMount, componenetDidUpdate와 같은 역할을 한다.
• 페이지가 처음 렌더링되고 나서 useEffect는 무조건 한번 실행된다.
• 렌더링 이후에 실행할 코드를 만들 수 있다.
• useEffect의 첫번째 인자는 function, 두번째 인자는 dependency이다. (두번째 인자에 해당하는 state가 변할 때만 function이 실행된다.)

useEffect(() => {})
// useEffect의 기본 형태로 거의 사용x 
// Dependency가 없어서 렌더링마다 실행되고 작은 요소가 변화할 때마다 발동되어 불필요한 실행이 많아짐

useEffect(() => {}, [])
// 렌더링후 단 한번만 실행할 때 사용
// 콜백함수 뒤 대괄호에 Dependency를 지정한다. (빈 배열은 렌더링 직후 한번만 실행)

const [name, setName] = useState();
useEffect(() => {}, [name])
// 렌더링후 한번, 대괄호 안 변수값이 바뀔 때마다 실행되는 코드
// 지정값이 변했을 때만 실행됌

 

useRef

• ref는 특정 element 현상을 발생시키는 역할 (input의 포커스 이동, 동영상 재생..)
• js에서는 특정 DOM을 선택해야 할 때 getElementById, querySelector와 같은 DOM selector 함수를 사용한다.
• 또한 컴포넌트 안에서 조회, 수정할 수 있는 변수를 관리하는 용도로 쓰인다. 
• useRef는 current 속성을 갖는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당하고, 이 속성은 값을 변경해도 상태를 변경할 때처럼 컴포넌트가 리렌더링되지 않고, current 값을 유지한다.

 

useCallback

• 컴포넌트는 자신의 state나 부모에게서 받은 props가 변경될 때마다 리렌더링 되므로 굳이 렌더링하지 않아도 될때 cost 낭비가 발생하게 된다. 이를 방지하기 위해 이미 생성된 함수를 재활용하는 기능을 수행한다.
• 함수를 메모이제이션하기 위해 사용되는 hook 함수 (=useMemo)
• useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정함수를 새로 만들지 않고 재사용하고 싶을  때 사용한다.
• 첫번째 인자로 함수를, 두번째 인자의 배열 안의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

const memoizedCallback = useCallback(함수, 배열);