리덕스 적용
1. store 생성. 어디에서나 실행시킬 수 있도록 전역변수로 저장
2. 자동으로 store 안에 state 생성
3. reducer라는 함수를 만들어서 store에 state 값 주입
4. state 값을 확인하기 위해 getState 사용
5. 상태값 변경을 위해 dispatch 사용
6. reducer는 현재 state 값과 변경해야하는 action을 받아서 다음의 state 값을 return
<body>
<div id="red"></div>
<script>
function reducer(state, action){ <!-- 3, 6 -->
if(state === undefined){ <!--state값이 정의되어있지 않은 경우-->
return {color:'yellow'} <!--초기 state 값-->
}
return {color:'red'} <!-- 버튼 클릭시 state 값 red로 변경 -->
}
var store = Redux.createStore(reducer); <!-- 1 -->
console.log(store.getState()); <!--4 //{color: "yellow"} 출력-->
function red(){
var state = store.getState();
document.querySelector(#red).innerHTML = `
<div class="container" id="component_red" style="background-color:${state.color}">
<h1>red</h1>
<input type="button" value="fire" onclick="
store.dispatch({type:'CHANGE_COLOR', color:'red'});
">
<!-- 5 //input 버튼을 누르면 color가 red로 변경되도록 dispatch 사용해서 수정 요청.
type은 반드시 있어야함-->
</div>
`;
}
</script>
</body>'Fronted > React' 카테고리의 다른 글
| [React] JSX 개념, 문법, 스타일링 요약 정리 (0) | 2024.03.27 |
|---|---|
| [Redux-Saga] 개념, 이펙트 요약 정리 (0) | 2024.03.25 |
| [Redux] 1. 리덕스 개념과 특징, 용어 정리 (0) | 2024.03.21 |
| [React] 개발 환경 세팅, 프로젝트 생성하기 (0) | 2024.03.21 |