✏️Achievement Goals
✅ 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
✅ Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
✅ Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
✅ Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
✅ Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
📝summary
React에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠고
Redux 스프린트에서는 컴포넌트와 상태를 분리하는 패턴을 배운다
그동안 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많다
그러나 상태 변경 로직을 컴포넌트로부터 분리하면, 표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있게 된다
redux 쓰는 이유 : props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있다
Cmarket (Hooks) 스프린트 에서
<App>안의<ItemListContainer>안의<item>복잡한 하위 컴포넌트만들 때
<App>의 state 데이터를<item>이 사용하고 싶으면 props로 2번 보내줘야 했다
redux를 쓰면 복잡한 props 전송이 필요없이 그냥 바로 state 데이터를 꺼내쓸 수 있다
🌝 리덕스 설치 / 세팅
1 라이브러리 설치
리덕스를 사용하기 위해서 라이브러리 두개를 설치해야 한다
npm install redux react-redux
redux는 데이터를 엄격하게 관리하는 기능,
react-redux는 리덕스를 리액트에서 쓸 수 있게 도와주는 기능을 제공한다
2 <Provider> import 해오기
3 <Provider>로 state값 공유를 원하는 컴포넌트를 감싸면 된다
Provider로 감싸진 컴포넌트는 같은 state를 사용 할 수 있다
index.js
import ......;
import {Provider} from 'react-redux';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider>
<App/>
// App 컴포넌트를 index.html에 넣어준다는 의미
</Provider>
</BrowserRouter>
</React.StrictMode>
);4 redux에서 state를 하나 만들려면 createStore() 함수를 사용해야 한다
useState대신 createStore 사용
index.js
import .....;
import {Provider} from 'react-redux';
import {createStore} from 'redux';
let store = createStore(()=>{ return [{id : 0, name : '코드스테이츠'}] })
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider>
<App/>
</Provider>
</BrowserRouter>
</React.StrictMode>
);import 해온 뒤 createStore(콜백함수) 이렇게 사용하시면 된다
콜백함수에 원하는 state 초기값을 넣어주면 state가 완성된다
5 <Provider>에 만든 state를 props처럼 등록하면 끝이다
이렇게 세팅을 마치면 하위컴포넌트들이 props전송없이 state를 사용할 수 있다
index.js
import .....;
import {Provider} from 'react-redux';
import {createStore} from 'redux';
let store = createStore(()=>{ return [{id : 0, name : '코드스테이츠'}] })
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App/>
</Provider>
</BrowserRouter>
</React.StrictMode>
);{id : 0, name : '코드스테이츠'} 초기값 데이터를 redux store 안에 만들었다
(redux 설치 후엔 state들을 store라는 명칭으로 부른다)
🌚 store에 있는 state 데이터 사용 방법
저장한 데이터를 ItemListContainer.js 에서 사용하기 위해서는 store 안에 있는 데이터를 props의 형태로 등록해야 한다
ItemListContainer.js
import ....;
import {connect} from 'react-redux';
function ItemListContainer(props){
return (
<div>
{props.state[0].name}
</div>
)
}
function state를props화(state){
return {
state : state
}
}
export default connect(state를props화)(ItemListContainer);-
데이터사용을 원하는 컴포넌트.js 파일 밑에 function을 하나 만들어주고
-
그 다음 export default 뒤에 connect(..)(...)을 적어주면 된다
(connect 함수는 위에서 import 해와야 한다) -
props 사용하려면 function ItemListContainer(props) 이렇게 파라미터를 추가해야 하고
필요한 곳에서 아까 등록한 props 이름을 써서 사용하면 된다
{ props.state[0].name }이렇게!
1번
store 안에 있던 state를 props로 만들어주는 역할이다
return 안에{ 아무거나적기 : state } 이렇게 적으면
store 안에 있던 모든 state 데이터가 props로 등록된다
ItemListContainer.js에서 아무거나적기 이라는걸 출력해보면 index.js에 저장해뒀던 redux내의 state가 나온다
2번
connect 함수에 아까 만든 함수를 집어넣는 react-redux 라이브러리 사용법이고
ItemListContainer 컴포넌트도 함께 소괄호 안에 넣어준다
이렇게 하면 redux store에 있던 데이터들이 props로 엮인 채로 컴포넌트가 export 된다
여기서 connect(..)(...) 소괄호가 두개 붙는걸 발견 할 수 있다
함수()() 이렇게 쓰는 건 함수()부분이 또 다른 함수를 리턴 하기 때문에 소괄호를 뒤에 붙여서 쓸 수 있는 라이브러리 사용법 이다
🌞 정리 🌞
-
redux는 props 전송하기 귀찮을 때 사용한다
-
먼저 redux를 설치, 세팅해야 사용할 수 있다
설치
npm install redux react-redux
세팅
1. index.js에<Provider>를 import 해온 다음
2. state 값공유를 원하는 컴포넌트를 감싸면 된다
3. createStore를 import 해온 다음 createStore()로 state를 만들어 let store라는 변수에 저장한다
4.<Provider store={store}>store를 등록하면
Provider로 감싼 모든 컴포넌트는 store안에 있던 값을 props없이 공유 할 수 있다
store안에 있던 state 사용
원하는 컴포넌트 파일에 가서
1. 하단에 function ..() 를 하나 만들어주고 state를 props로 등록한다
2. 그리고 또 하단에 export default connect(..)(...); 이제 아까 만들어둔 state가 props로 등록되고
3. function 컴포넌트(props){} props를 넘겨주고 나면
props.state이름이렇게 저장된 state를 사용할 수 있다
Redux에 대한 오해
Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리로 오해할 수 있다 하지만 Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리이다
