Hook 이란?
component에는 2가지 종류가 있다.
1.Function Component // state 사용 불가, lifecycle에 따른 구현 불가
2.Class Component // 생성자에서 state 정의, setState를 통해 update, lifeCycle methods 제공
또 component에는 state라는 중요한 개념이 등장하고, 이 state를 통해 렌더링에 필요한 data를 관리한다.
Function Component를 사용하면 state를 정의해서 사용하거나, 생명주기에 맞춰 코딩이 할 수 없었지만, Hooks을 이용해 state 관련 함수나 lifeCycle 관련 함수를 이용 할 수 있도록 해준다.
Hooks는 앞에 use를 붙여 hooks인걸 나타낸다.
Hooks의 종류
useState() - state를 사용하기 위한 Hook
const [변수명, set함수명] = useState(초기값);
import React, { useState } from "react";
function ClickCounter(props) {
// var count = 0;
// 이렇게 사용 하면 재 렌더링이 되지 않아 화면은 바뀌지 않는다.
const [count, setCount] = useState(0);
// 변수 각각에 대해 set함수가 따로 존재
return (
<div>
<p>총 {count}번 클릭 했습니다. </p>
{/* <button onClick={() => count++}> 클릭 </button> */}
<button onClick={() => setCount(count+1)}> 클릭 </button>
</div>
)
}
export default ClickCounter;
클릭 할 때 마다 state의 값이 변한다.
useEffect - side effect를 수행하기 위한 Hook
useEffect(이펙트 함수, 의존성 배열);
Side effect?
react에서 Side effet는 효과나 영향을 의미하고, 보통 서버에서 data를 받아오거나 수동으로 DOM수정
다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 해서 side effect 라고 불린다.
useEffect는 react 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook
즉, lifeCycle methods (mount, update, unmount)를 사용하게 해준다고 생각하면 된다.
useEffect(이펙트 함수, 의존성 배열) -> 의존성 배열의 값이 하나라도 변경되면 이펙트 함수 실행
( 이펙트 함수는 첫 컴포넌트가 렌더링된 이 후, 업데이트로 인한 재 렌더링 이후에 실행 )
useEffect(이펙트 함수, [ ]) -> 빈 배열을 넣을 시, mount, unmount시에만 한번씩 실행
( props나 state에 의존하지 않으므로 여러번 실행되지 않는다. )
useEffect(이펙트 함수) -> 의존성 배열 생략 시, 컴포넌트 업데이트 될 때마다 실행된다.
import React, { useState } from "react";
import { useEffect } from "react";
function ClickCounter(props) {
// var count = 0;
// 이렇게 사용 하면 재 렌더링이 되지 않아 화면은 바뀌지 않는다.
const [count, setCount] = useState(0);
// 변수 각각에 대해 set함수가 따로 존재
useEffect(() => { 컴포넌트 업데이트 될 때 마다 실행
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>총 {count}번 클릭 했습니다. </p>
{/* <button onClick={() => count++}> 클릭 </button> */}
<button onClick={() => setCount(count+1)}> 클릭 </button>
</div>
)
}
export default ClickCounter;
useMemo() - Memoized value를 리턴하는 Hook
Memoization 최적화를 위해 사용, 연산량이 높은 함수의 호출 결과를 저장 해두었다가, 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해둔 결과를 리턴
-> 결과적으로 중복연산x, 자원을 아낄 수 있음
memoization 된 결과 값을 memoized value 라고 하며, 메모해뒀다가 쓴다고 생각하면 편하다.
useMemo()사용법
파라미터로 memoized value를 생성하는 create 함수와 의존성 배열을 받는다.
의존성 배열의 값이 바뀐 경우에만 새로 create 함수를 호출하여 결과 값을 반환한다.
렌더링이 일어나는 동안 실행된다.
의존성 배열을 넣지 않고 사용 할 경우 아무런 의미가 없다.
의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출 된다.
useCallback() - useMemo와 비슷하지만 함수를 반환한다.
의존성 배열이 변경 되었을 경우에만 , memoizetion된 callback함수 반환
useRef - reference를 사용하기 위한 Hook
reference란 특정 컴포넌트에 접근할 수 있는 객체
current라는 속성이 있는데, 현재 참조하고 있는 element를 의미한다.
const refContainer = useRef(초깃값);
// 초깃값으로 초기화된 레퍼런스 객체 반환, 컴포넌트가 언마운트 전까지 유지된다.Hook규칙
- hook은 무조건 최상위 레벨에서만 호출해야 한다. (반복, 조건문, 중첩된 함수 내에서 호출x)
- 컴포넌트가 렌더링 될 때 마다 매번 같은 순서로 호출 되어야 한다.
- 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
