[React] hooks (useState, useRef, useContext)

데이터를 읽어서 출력만 함 -> 서버 컴포넌트

데이터를 서버로부터 가져오기 위해 async - await 사용

실행 중 서버 에러가 발생하는 경우 .next 폴더를 지우고 다시 해보는 것도 방법

rm -rf .next	# .next 폴더 제거
npm run dev		# 다시 실행

useState & useRef 비교

useState를 사용하면 값이 바뀔 때마다 렌더링 되기 때문에 성능에 안 좋지만
useRef를 사용하면 값이 아무리 바뀌어도 렌더링이 일어나지 않아서 성능이 좋음

let & useRef 비교

let 변수는 컴포넌트가 렌더링 될 때마다 값이 초기화되지만
useRef 변수는 컴포넌트가 다시 마운트되기 전까지는 값이 유지됨

Context

Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있으므로 필요할 때만 사용
많은 컴포넌트에게 전역적인 데이터를 전달하기 위함
Prop driling을 피하기 위한 목적이면 component composition을 우선 고려

사용

1. context 정의

# ThemeContext.js
const ThemeContext = createContext();

2. App 컴포넌트에서 context 불러와서 하위 컴포넌트들에게 뿌려줌

# App.js
<ThemeContext.Provider vlaue={{ isDark, setIsDark }}>
	<Compo1 />
    <Compo2 />
</ThemeContext.Provider>

3. 하위 컴포넌트에서는 useContext로 가져와서 사용

# Compo1.js
const { isDark } = useContext(ThemeContext);