🧸 Hook이란
- React v16.8 이상부터 사용 가능
- 반복문, 조건문, 중첩된 함수 내에서 호출 불가
- 함수형 컴포넌트에서 사용
- React State와 생명주기 기능을 연동
- 네이밍 규칙 : use[...]
🧸 Hook 종류
✨ useState()
사용자의 반응에 따라 화면을 렌더링 하기 위해 사용
사용법
const [변수명, set함수명] = useState(초기값);변수명 : 해당 데이터를 사용할 때 쓰는 변수
set함수명 : 데이터의 값(상태)를 변경하고자 할 때 사용하는 함수
사용 예
변수 각각에 대해 set함수가 따로 존재
✨ useEffect()
- side effect를 수행하기 위한 Hook
- 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook
사용법
useEffect(이펙트 함수, 의존성 배열); /*의존성 배열 : 이펙트가 의존하고 있는 배열*/- 의존성 배열 안에 있는 변수의 값이 하나라도 변경되면 이펙트 함수가 실행
- 처음 컴포넌트가 렌더링 된 이후와 재렌더링 된 이후에 실행됨
useEffect(이펙트 함수, []);- mount, unmount시에 단 한번씩만 실행
useEffect(이펙트 함수);- (처음 렌더링 될 때 포함)컴포넌트가 매번 렌더링 될 때마다 실행
사용 예
- useEffect에서 return하는 함수는 컴포넌트가 unmount될때 호출됨
- 하나의 컴포넌트에 여러개의 useEffect를 사용할 수 있음
✨ useContext
- context를 좀 더 편하게 사용할 수 있도록 도와주는 hook
- context : props를 사용하지 않고 컴포넌트 트리 전체에서 데이터 제공
Context API 3가지
- createContext(initialValue) -> 부모 컴포넌트에 작성
- Context.Provider -> 부모 컴포넌트에 작성
- useContext(Context) -> 자식 컴포넌트에 작성
1. createContext(initialValue)
- context 객체 생성
- Provider와 Consumer 반환
- Provider : 생성한 context를 하위 컴포넌트에게 전달
- Consumer : context의 변화 감시
- 파라미터는 Provider를 사용하지 않는 경우 적용될 초기값
import React, { useState, createContext } from ‘react’;
import Mart from ‘./components/Mart’;
export const AppContext = createContext();
const initValue = {
name: ‘Kim’,
age: 25
};
2. Context.Provider
- context 객체 생성
- Provider와 Consumer 반환
- Provider : 생성한 context를 하위 컴포넌트에게 전달
- Consumer : context의 변화 감시
- 파라미터는 Provider를 사용하지 않는 경우 적용될 초기값
function App() {
return (
<>
<AppContext.Provider value={initValue}>
<Children />
</AppContext.Provider>
</>
);
}
export default App;3. useContext(Context)
- context의 변화를 감시
- context의 저장된 상태를 불러올 때 사용
import React from ‘react’;
import { AppContext } from ‘./App’;
const Children = () => {
const initValue = useContext(AppContext);
return (
<>
<h3> 이름 : {initValue.name} </h3>
<h3> 나이 : {initValue.age} </h3>
</>
);
};
export default Children;✨ useMemo()
- Memoized value를 리턴하는 hook
*Memoized Value : Memoization이 된 결과 값
사용법
- 컴포넌트가 다시 랜더링 될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있음
- useMemo로 전달되는 함수는 렌더링이 일어나는 동안 실행
- useMemoHook에 의존성 배열을 넣지 않고 사용하는 것은 아무런 의미가 없음
- 마운트 이후에는 값이 변경되지 않음
✨ useCallback()
- useMemo() Hook과 유사하지만 값이 아닌 함수를 반환
- 컴포넌트가 렌더링 될 때마다 함수를 새로 정의하는 것이 아니라 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의해서 return
사용법
- 부모 컴포넌트가 재렌더링 될 때마다 자식 컴포넌트도 재렌더링
- 특정 변수의 값이 변한 경우에만 함수를 다시 렌더링
✨ useRef()
- 레퍼런스를 사용하기 위한 Hook
- 레퍼런스를 반환함
레퍼런스
특정 컴포넌트에 접근할 수 있는 객체
refObject.current -> 현재 레퍼런스 하고 있는 엘리먼트를 의미사용법
- 파라미터로 초깃값을 넣으면 초기화된 레퍼런스 객체를 반환
- 렌더링 될 때마다 같은 레퍼런스 객체를 반환
- 내부의 데이터가 변경되었을 때 별도로 알리지 않음
- current속성을 변경해도 재렌더링이 일어나지 않음
usecallback ref
- ref에 돔 노드가 연결되거나 분리되었을 경우 실행하고 싶을 때 사용
- ref가 다른 노드에 연결될 때마다 callback을 호출
- h1태그가 마운드, 언마운트 될 때만 콜백함수가 호출
- 재렌더링 일어날 때는 호출되지 않음
