🚀 React 기본 Hooks 간단 정리
React의 기본 Hooks를 간단히 정리해본다.
📌 useState
const [state, setState] = useState(initialState);
- params : state의 기본값, 초기값.
- return : [상태 값, 상태 설정 함수] 형태의 배열
-
setState(newState);
상태 설정 함수 setState 함수는 state를 갱신할 때 사용한다.
새 state값을 받아 컴포넌트 리렌더링을 큐에 등록하고, 다음 리렌더링 시 useState에서 반환 받은 state 상태 값은 갱신된 최신 state 값을 가진다. -
하나의 useState는 하나의 state만 관리할 수 있다. 컴포넌트에서 관리할 상태가 여러 개라면 useState를 여러 번 사용할 수 있다.
📌 useEffect
useEffect(function, [...]);
- params : 1. 어떤 effect를 발생하는 함수. 2. (조건부 effect) effect가 종속되어 있는 값의 배열.
- return(정리 effect) : 정리(clean-up) 함수
- 기본 동작은 모든 렌더링을 완료한 후 effect를 발생하는 것으로, 의존성 중 하나가 변경된다면 effect는 항상 재생성된다.
- 특정 값 업데이트 시에만 실행되는 조건부 effect에서는, 두번째 인자로 종속값 배열을 준다.
마운트될 때만 실행하고 싶은 경우, 두번째 인자로 빈 배열을 넣어준다. - 컴포넌트 언마운트 전 혹은 업데이트 전 정리(clean-up)가 필요한 effect에서는, return에 정리(clean-up) 함수를 반환한다.
📌 useContext
const value = useContext(MyContext);
- params : context 객체(React.createContext에서 반환된 값)
- return : 그 context의 현재 값
- useContext로 전달한 인자는 context 객체 그 자체이어야 함
- context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정
- 컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거
- useContext(MyContext)는 클래스에서의 static contextType = MyContext 또는 <MyContext.Consumer>와 같다.
🌱 React.createContext
const MyContext = React.createContext(defaultValue);
- Context 객체를 만듦
- defaultValue 매개변수는 적절한 Provider를 찾지 못한 경우 쓰이는 값.
🌱 Context.Provider
MyContext.Provider value={어떤 값}
- Context 오브젝트에 포함된 React 컴포넌트인 Provider는, context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할
- Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달
👉 Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링- Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됨
🌱 사용 예시
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee",
},
dark: {
foreground: "#ffffff",
background: "#222222",
}
};
const ThemeContext = React.createContext(themes.light);
function App() {
return (
<ThemeContext.Provider value={themes.dark}>
<ThemedButton />
</ThemeContext.Provider>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme.background, color: theme.foreground }}>
I am styled by theme context!
</button>
);
}References
ヾ(^▽^*)))