_TIL
20240808. TIL
SILTEA
2024. 8. 9. 23:58
React의 전역상태관리를 배우기 시작했다.
항상 새로운 걸 익히는데 벅차서
이론으로 익혀뒀던 건 체득을 못하는 기분이라
조금 더 덜 자고 노력해야 하나 고민이 많아진다..
다른 사람보다 느릴지 모르지만
꾸준히 하다보면 되겠지!
그럼 오늘의 공부 가자 가자 가자고!
•• React 내부상태관리 개념
✔️ 상태(State) 란?
- React에서 쓰이는 개념으로 React의 Component안에서 사용하는 데이터를 뜻한다
- State는 변경이 가능한 데이터로 React는 이 State(상태) 변화를 추적하다가 State가 변화하면 그에 따라 화면을 변경한다.
💡 상태의 종류
- 지역 상태 : 특정 컴포넌트 안에서만 관리되는 상태를 뜻한다.
- 컴포넌트 간 상태 : 여러 컴포넌트에서 관리되는 상태를 뜻한다. 다수의 컴포넌트에서 쓰이고, 영향을 미치는 상태를 뜻한다.
- 전역 상태 : 프로젝트 전체에 영향을 끼치는 상태이다.
💡 Props Drilling
- useState만 이용해서 상태를 관리했을 때 발생하는 현상
- Props Drilling 자체는 React로 개발하게 되면 발생하는 자연스러운 현상으로 상태를 체계적으로 설계해서 사용하면 useState만으로 애플리케이션을 만들 수 있다.
- 하지만, 설계를 잘했더라도 Props가 과하게 발생하면 코드가 지저분해지고 관리가 어려워진다.
App 컴포넌트는 드릴링을 하지 않아도 되고
전혀 상관없던 자식 컴포넌트들도
App으로부터 상태를 받아
아래의 자식으로 전달하지 않아도 된다.
💡 Context API 란?
- 상태의 여러 가지 종류 중 전역 상태, 그중에서도 내부 전역상태를 관리하는 방법 중 하나
- Context API는 React내부, 컴포넌트 안에서 전역상태를 공유, 관리하는 방법이다.
- 이미 존재하는 상태를 다른 컴포넌트들과 쉽게 공유할 수 있게 해주는 역할을 한다.
✔️ 구성
→ Context
전역 상태를 저장하는 곳.
Context 내부에 Provider와 Consumer가 정의되어 있고, Consumer는 Context를 통해 상태에 접근이 가능하다
→ Provider
전역 상태를 제공하는 역할
Context에 상태를 제공해서 다른 컴포넌트가 상태에 접근할 수 있도록 도와준다.
제공된 상태에 접근하기 위해서는 Provider 하위에 컴포넌트가 포함되어 있어야 한다.
따라서 모든 컴포넌트에 접근 가능하도록 Root component (→index.js / app.js)에서 Provider를 정의한다.
→ Consumer
제공받은 전역 상태를 받아서 사용하는 역할
Context는 Consumer 사이에 있는 첫 객체를 Context에 인자로 전달하기 때문에 빈 객체 작성 후 JSX를 작성해야 한다
💡 Context API 사용법
import {createContext} from 'react';
const MyContext = createContext();
→ createContext 함수를 불러와서 Context를 만든다.
→ 기본 값을 설정하고 싶은 경우 createContext 함수 안에 인자로 기본 값을 넣어주면 된다.
function App() {
return (
<MyContext.Provider value="Hi">
<GrandParend>
</MyContext.Provider>
);
}
→ Context 객체 안에 Provider라는 컴포넌트가 있다.
→ 컴포넌트 간에 공유하고자 하는 값을 value라는 props로 설정하면 자식 컴포넌트들에서 해당 값에 접근할 수 있다.
import {useContext} from 'react';
function Message(){
const value = useContext(MyContext);
return <div>Received: {value}</div>;
}
수업에서 props drilling을 실습했는데 내가 다 어질어질한 기분이었다.
어떻게 보면 props를 사용하는 순간부터 예견되어 왔는지도..
한두 개의 props면 코드를 읽는데 무리는 없겠지만
페이지의 DOM구조가 복잡하면 복잡해질수록 사용하는 props의 수는 기하급수적으로
늘어날 테고, 유지보수, 코드의 가독성면에서 최악이 될 거라는 생각이 들었다.
(뭐든 적재적소에 적당히..)
그래도 조금씩 코드를 읽을 수 있게 되고,
어떻게 동작하는지 알게 되니 공부가 즐겁다!
- 참고자료