Context API
전역 상태 관리를 도와주는 기능
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
전역적으로 여기저기서 사용되는 상태가 있고 컴포넌트의 개수가 많은 상황이라면, Context API를 사용하는 것을 권장한다. (ex. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등)
이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있는데, 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다.
❗ context는 상태관리 도구는 아니다. context에 대한 설명을 읽어보면 관리에 대한 내용은 전혀 없고 값의 전달, 공유만을 언급한다. 말 그대로 전역 상태 관리를 도와주는 기능을 하는 것이다.
Redux
상태 관리 라이브러리
Context API 기반으로 만들어져 있으며 전역 상태 관리를 도와준다. 리액트 v16.3에서 Context API가 개선되기 전에는 주로 리덕스를 사용하여 전역 상태를 관리해 왔다. 단순한 전역 상태 관리라면 Context API로 리덕스를 대체할 수 있지만 모든 상황에서 대체가 가능한 것은 아니다.
- 프로젝트의 규모가 클 경우 리덕스를 사용하는 편이 좋다. 코드의 유지 보수 성도 높여 주고 작업 효율도 극대화해 주기 때문이다.
- 추가로 아주 편리한 개발자 도구도 지원하며 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다.
✅ 개념정리
1. 액션
상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생하는데 이는 하나의 객체로 표현된다. (아래 예제)
{
type:'ADD_TODO',
data:{
id:1,
text:'리덕스 배우기'
}
}액션 객체는 type 필드를 반드시 가지고 있어야 하며 이 값을 액션의 이름이라고 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며 작성자 마음대로 넣을 수 있다.
2. 액션 생성 함수
액션 객체를 만들어 주는 함수이다.
//화살표 함수로도 작성 가능
function addTodo(data){
return{
type:'ADD_TODO',
data
}
}어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수도 있다. 이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.
3. 리듀서
리듀서는 변화를 일으키는 함수이다. 액션을 만들어 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 그리고 두 값을 참고하여 새로운 상태를 만들어 반환한다.
const initialState={
counter:1
};
function reducer(state=initialSate, action){
switch(action,type){
case INCREMENT:
return{
counter:state.counter+1
};
default:
return state;
}4. 스토어
프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만든다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닌다.
5. 디스패치
디스패치(dispatch)는 스토어의 내장 함수 중 하나이다. '액션을 발생시키는 것'이라고 이해하면 된다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어 호출한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어 준다.
6. 구독
구독(subscribe)도 스토어의 내장 함수 중 하나이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.
const listener=()=>{
console.log('상태가 업데이트됨');
}
const unsubscribe=store.subscribe(listener);
unsubscribe(): //추후 구독을 비활성화 할 때 함수를 호출❗ 리액트 없이 쓰는 리덕스
리덕스는 리액트에 종속되는 라이브러리가 아니다. 다른 UI 라이브러리/프레임워크와 함께 사용할 수도 있다. (ex. angular-redux, ember redux..) 리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있다.(바닐라 자바스크립트란 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체를 의미한다.)
🔺 리덕스의 3가지 규칙
-
단일 스토어
하나의 애플리케이션 안에는 하나의 스토어가 들어있다. -
읽기 전용 상태
상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다. -
리듀서는 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수한 함수 조건은 다음과 같다.
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
- 파라미터 외의 값에는 의존하면 안된다.
- 이전 상태는 절대로 건드리지 않고 변화를 준 새로운 상태 객체를 만들어 반환한다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 같은 결과값을 반환해야 한다.
예를 들어 리듀서 함수 내부에서 랜덤 값을 만들거나 Date 함수를 이용하여 현재 시간을 가져오는 등은 불가하다. 이러한 작업은 리듀서 함수 밖에서 처리해야 한다(액션을 만드는 과정에서 처리하거나 리덕스 미들웨어에서 처리해도 된다).
바닐라 자바스크립트 환경에서 리덕스를 사용할 때 스토어의 내장 함수인 store.dispatch와 store.subscribe를 사용했는데, 리액트 애플리케이션에서 리덕스를 사용하는 경우 store 인스턴스를 직접 사용하기보다는 주로 react-redux 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리한다.
📌참고자료
context는 상태관리 도구가 아니다.
