ContextAPI, React Redux
1. ContextAPI
1) createContext, Provider
createContext
Provider
store의 저장소이며 Context.Provider의 value를 return하여 데이터를 전달
// MovieContext.js
import React, { useState, createContext } from 'react';
// CREATECONTEXT
export const MovieContext = createContext();
// PROVIDER
export const MovieProvider = props => {
const [movies, setMovies] = useState([
{
name: 'Harry Potter',
price: '$10',
id: 1
},
{
name: 'Game of Thrones',
price: '$10',
id: 2
},
{
name: 'Inception',
price: '$10',
id: 3
}
]);
return (
<MovieContext.Provider value={[movies, setMovies]}>
{props.children}
</MovieContext.Provider>
);
};
2) useContext
useContext()를 통해 Provider의 state를 사용할 수 있다.
// MovieList.js
import React, { useState, useContext } from 'react';
import Movie from './Movie'
import { MovieContext } from './MovieContext'
const MovieList = () => {
const [movies, setMovies] = useContext(MovieContext);
return (
<div>
{movies.map(movie => (
<Movie name={movie.name} price={movie.price} key={movie.id} />
))}
</div>
);
};
export default MovieList;
// Movie.js
import React from 'react'
const Movie = ({ name, price }) => {
return (
<div>
<h3>{name}</h3>
<p>{price}</p>
</div>
);
};
export default Movie;
// App.js
import React from 'react';
import MovieList from './MovieList'
import { MovieProvider } from './MovieContext'
function App() {
return (
<MovieProvider>
<div className='App'>
<MovieList />
</div>
</MovieProvider>
);
}
export default App;
2. React Redux
상태관리 매니저(ex. ContextAPI, MobX)이며
기존 부모 컴포넌트로부터 자식 컴포너트으로 한방향 전달하는 단점을
스토어에 상태를 모아놓고 어떤 컴포넌트에서든지 상태를 가져올 수 있다.
$ npm i redux react-redux
redux : 상태 관리
react-redux : 리덕스를 리액트에 사용 가능하게
import { createStore, useSelector } from 'redux'
// STORE : GLOBALIZED STATE
let store = createStore(counter);
// ACTION : DESCRIBE "WHAT YOU WANNA DO"
// FUNCTION -> RETURN OBJECT
const increment = () => {
return {
type: 'INCREMENT'
}
}
const decrement = () => {
return {
type: 'DECREMENT'
}
}
// REDUCER : DESCRIBE "CHECK ACTION THEN TRANSFORM STATE TO NEXT STATE"
// FUNCTION -> RETURN OBJECT
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
// combineReducers : USE REDUCER TOGETHER
const allReducers = combineReducers({
counter: counterReducer // === counterReducer
})
// Disaply it in the console
store.subscribe(() => console.log(store.getState()));
// DISPATCH : EXECUTE ACTION
store.dispatch(increment()); // 1
store.dispatch(decrement()); // 0
store.dispatch(decrement()); // -1
// useSelector : ACCESS TO STATE
const counter = useSelector(state => state.counter);
Author And Source
이 문제에 관하여(ContextAPI, React Redux), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@blackb0x/ContextAPI-React-Redux저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)