티스토리 뷰
리액트 훅(Hook)
- 함수형 컴포넌트에서 상태 관리나 라이프사이클 기능 등을 사용할 수 있게 해주는 React의 기능
- 함수형 컴포넌트: 그냥 JavaScript 함수. props를 받아서 JSX을 리턴.
- 자주 쓰는 기본 훅
- useState: 상태 관리 할 수 있게 해줌
- useEffect: 컴포넌트가 렌더링될 때, 혹은 특정 값이 변경될 때 실행되는 코드 작성
- useRef: DOM을 직접 참조하거나, 렌더링과 상관없는 값을 저장할 때 사용
- useMemo, useCallback: 컴포넌트가 불필요하게 다시 계산되거나 함수를 새로 생성하지 않게 최적화할 때 사용
- useReducer를 사용해서 로직을 컴포넌트로부터 분리하는 건 요즘 많이 쓰는 패턴 중 하나
- 리액트 훅은 이름 앞에 항상 use를 붙임
State
- useState로 State 생성
const [light, [setLight] = useState('off');
light: State 변수
setLight: set 함수
useState('off');: 생성자(초깃값)import { useState } from "react";
function Body() {
const [count, setCount] = useState(0);
return (
<div>
<h2>{count}</h2>
</div>
);
}import { useState } from "react";
function Body() {
const [count, setCount] = useState(0);
const onIncrease = () => {
setCount(count + 1);
};
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
</div>
);
}
export default Body;- set 함수를 호출해 State 값을 변경하면, 변경값을 페이지에 반영하기 위해 컴포넌트를 다시 렌더링. 리액트에서는 이것을 '컴포넌트의 업데이트'라고 표현.
- 리액트에서는 부모 컴포넌트가 리렌더되면 자식도 함께 리렌더. 의미 없는 리렌더가 자주 발생하면 웹 브라우저의 성능은 떨어짐. 따라서 컴포넌트의 부모-자식 관계에서 State를 사용할 때는 늘 주의가 필요.
'Props Drilling' 문제와 Context
- Props는 컴포넌트 트리에서 언제나 부모에서 자식으로 단방향으로 전달됨. 결론은 원하는 목적지까지 데이터를 전달하기 위해서는 경로상에 있는 모든 컴포넌트에 일일이 Props를 전달해야 함
- Context: 리액트에서 Context는 같은 문맥 아래에 있는 컴포넌트 그룹에 데이터를 공급하는 기능 -> Context를 이용하면 단계마다 일일이 Props를 전달하지 않고도 컴포넌트 트리 전역에 데이터를 공급할 수 있어 Props Drilling 문제를 간단히 해결 가능
- Context 만들기
import React from 'react';
const MyContext = React.createContext(defaultValue);- Context에 데이터 공급하기
- Prodiver 컴포넌트는 Props로 공급할 데이터를 받아, 컴포넌트 트리에서 자신보다 하위에 있는 모든 컴포넌트에 데이터를 공급
import React from 'react';
const MyContext = React.createContext(defaultValue);
function App() {
const data = 'data';
return (
<div>
<Header />
<MyContext.Provider value={data}>
<Body />
<MyContext.Provider>
</div>
);
}
export default App;- Context가 공급하는 데이터 사용하기
- 만약 useContext를 호출한 컴포넌트가 인수로 전달한 Context 그룹에 속해 있지 않으면 오류 발생
import React, { useContext } from 'react'
const MyContext = React.createContext(defaultValue);
function App () {
(...)
}
function Main() {
const data = useContext(MyContext);
(...)
}Redux Toolkit
- Redux의 공식 추천 방식
- 훨씬 간단하고 직관적하게 작성 가능
- RTK Query라는 API 호출/캐싱 기능도 있음
300x250