📖 오늘 학습 뽀인트!

1. Redux

1. Redux

🕵️‍♀️Redux란?
state 상태 관리 라이브러리이다. 즉, React의 useState, useEffect 처럼 데이터들의 값이 바뀌었을 때 그 값들을 컴포넌트들에게 전달해주고 그 값들을 다시 화면에 보여준다.

---

💬 나만 하고 있던 오해
React와 Redux는 채용 공고에서 자주 본 기술 스택이다. React 가 지원 자격에 적혀 있으면 우대사항 같은 곳에 Redux, Recoil 등이 적혀 있던 걸 많이 봤다.
그래서, React-Router 처럼 Redux라는 모듈을 설치해 React에서'만' 해당 모듈을 사용하는 건 줄 알았다.
오해를 바로 잡자면, Redux는 React에만 종속된 라이브러리는 아니다. Redux는 Vanilla JS, Vue, React 개발 환경에서 사용 가능한 상태 관리 라이브러리이다.
내용을 조금 추가하자면, Recoil이 React-Router 처럼 모듈을 설치해 React에서만 사용하는 상태 관리 라이브러리이다.

---

✍ Vanilla JS에서 Redux

// 1. redux와 함께 redux dev tools(크롬 툴)를 사용
let store = Redux.createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__());

// 2. 상태 값 전달
<input type="button" value="눌러!"
 
// 3. 전달 받은 값 처리
function reducer(state, action){
	if(state===undefined){           // 3-1
		return { text:"hello" }
	} else if(action.type==='CHANGE_TEXT'){      // 3-2
    	newState = {...state, text:action.text}  // 3-3 
    }
    return newState                   // 4
}
// 5. 변경된 값이 적용되는 함수
function item1() {
let state = store.getState();
document.querySelector("#item1").innerHTML = `${state.text}`;
}
store.subscribe(item1);  // state 변경 시 해당 함수 실행
item1();            // 해당 함수를 state 변경 전 한 번 실행 

1. 이해가 필요한 코드는 아니라고 생각되며, 필요할 때마다 가져다 쓰면 되는 코드이다.

2. 클릭 시 상태 변화를 reducer에게 알리는 함수이다.
   input button을 클릭하면 inputText에 있는 값을 dispatch를 사용해 reducer에게 객체로 전달한다.

3. 2번 과정에서 전달 받은 값들을 사용해 새로운 값을 return 한다.

3-1 최초 state 값을 초기화 한다. text의 값을 "hello" 초기화 해줌으로 2번 과정에서 아직 클릭 하지 않았을 때도 값이 hello로 설정된다.

3-2 2번 과정에서 dispatch로 전달한
{type:'CHANGE_TEXT', text:value} 객체가 action이다.
2번 과정에서 클릭 했을 때는 action.type==='CHANGE_TEXT' 는 true이다.

3-3 newState라는 새로운 변수에 기존 state 값, 새로 변경되는 값을 객체로 저장한다....state 가 이전 state 값이고 text:action.text는 새로 추가할 값이다. 다만, 이전 값에도 text key가 존재하기 때문에 key와 value가 새로 추가되지 않고 기존 key에 value만 바뀐다.

4. 3-3 과정에서 교체된 새로운 값을 가진 newState 변수를 return 한다.

5. .getState()으로 변경된 newState 값을 가져와 사용한다.

---

💬 전체적인 구조를 보면 reducer라는 함수는 요청 받은 내용을 처리해주는 역할이고 변경된 값을 적용시키는 함수는 새로운 state 값만 요청하고 적용시킨다.

---

💬 reducer 함수는 한 프로젝트에 하나만 존재하기 때문에 처리 내용이 많아지면 그만큼 함수 내부 코드 길이가 길어진다.