Redux와 UI 관계
= 관계가 없다!
Redux는 독자적인 자바스크립트 라이브러리로,
사용자에게 보이는 UI가 없이도 사용 가능하다.
(따라서, 본래 React외에 NGULAR나 Vue와도 함꼐 사용가능하나
애초에 React와 궁합이 잘 맞도록 설계되었기에 React와 함께 사용하는 경우가 대부분이다.)
Redux와 UI 연동
1. Redux Store 생성
2. Store가 UI 업데이트(재렌더링)를 구독(subscription) 목록에 추가
3. UI 업데이트 과정
1) 현재 Redux Store의 데이터(state)를 가져옴
2) 가져온 데이터 중 UI에서 필요로 하는 데이터만 추출
3) 추출한 데이터를 사용해서 UI 업데이트
4. 필요한 경우 초기 UI 렌더링
5. UI 입력이 발생한 경우 Action을 Dispatch해서 UI 업데이트
→ Redux는 UI의 종류와 상관없이 동일한 방식으로 작동!
[실습] 신호등 애플리케이션 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>처음 만난 리덕스 - 신호등</title>
</head>
<body>
<div style="display: flex; gap: 16px">
<div
id="red-light"
style="width: 56px; height: 56px; border-radius: 100%"
></div>
<div
id="orange-light"
style="width: 56px; height: 56px; border-radius: 100%"
></div>
<div
id="green-light"
style="width: 56px; height: 56px; border-radius: 100%"
></div>
</div>
<div style="margin-top: 16px">
<button id="turn-on-red-button">빨간불 켜기</button>
<button id="turn-on-orange-button">주황불 켜기</button>
<button id="turn-on-green-button">초록불 켜기</button>
</div>
<script>
// Action Types
var ACTION_TYPE_TURN_ON_RED = "TURN_ON_RED";
var ACTION_TYPE_TURN_ON_ORANGE = "TURN_ON_ORANGE";
var ACTION_TYPE_TURN_ON_GREEN = "TURN_ON_GREEN";
// Action Creators
function turnOnRedActionCreator(text){
return {
type:ACTION_TYPE_TURN_ON_RED,
};
}
function turnOnOrangeActionCreator(text){
return {
type:ACTION_TYPE_TURN_ON_ORANGE,
};
}
function turnOnGreenActionCreator(text){
return {
type:ACTION_TYPE_TURN_ON_GREEN,
};
}
var initialState = {
red: false,
orange: false,
green: false,
};
// Reducer
function lightsReducer(state = initialState, action){
switch (action.type){
case ACTION_TYPE_TURN_ON_RED:
return {
...initialState,
red: true,
};
case ACTION_TYPE_TURN_ON_ORANGE:
return {
...initialState,
orange: true,
};
case ACTION_TYPE_TURN_ON_GREEN:
return {
...initialState,
green: true,
};
default:
return state;
}
}
// Create Redux Store
var store = Redux.createStore(lightsReducer);
var redLightElem = document.getElementById("red-light");
var orangeLightElem = document.getElementById("orange-light");
var greenLightElem = document.getElementById("green-light");
// UI update function
function render() {
if (store.getState().red){
redLightElem.style.backgroundColor="red";
}else {
redLightElem.style.backgroundColor="gray";
}
if (store.getState().orange){
orangeLightElem.style.backgroundColor="orange";
}else {
orangeLightElem.style.backgroundColor="gray";
}
if (store.getState().green){
greenLightElem.style.backgroundColor="green";
}else {
greenLightElem.style.backgroundColor="gray";
}
}
// Initial rendering
render();
// UI update subscribe Redux Store
store.subscribe(render);
// UI event(click) listeners for dispatching Redux Action
document
.getElementById("turn-on-red-button")
.addEventListener("click", function(){
store.dispatch(turnOnRedActionCreator());
});
document
.getElementById("turn-on-orange-button")
.addEventListener("click", function(){
store.dispatch(turnOnOrangeActionCreator());
});
document
.getElementById("turn-on-green-button")
.addEventListener("click", function(){
store.dispatch(turnOnGreenActionCreator());
});
</script>
</body>
</html>
'Web > React' 카테고리의 다른 글
| [처음 만난 리덕스] 7. Container (0) | 2023.12.31 |
|---|---|
| [처음 만난 리덕스] 5. Reducer (0) | 2023.12.25 |
| [처음 만난 리덕스] 4. Action (1) | 2023.12.25 |
| [처음 만난 리덕스] 3. Store (1) | 2023.12.25 |
| [처음 만난 리덕스] 2. Redux 시작하기 (0) | 2023.12.25 |