TIL - 21.08.12 👨‍💻

---

Side Effect

사이드 이펙트는 함수 (또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인을 뜻한다.
ex) API호출과 같은 네트워크 호출

---

State

State의 두가지 구분

로컬 - 특정 컴포넌트 안에서만 관리되는 상태
전역 - 프로덕트 전체 혹은 복수의 컴포넌트에서 관리되는 상태

자바스크립트에서 전역 변수를 남용하면 좋지 않지만 사용해야할 때가 있는 것 처럼 전역 상태 역시도 사용해야할 때가 있다.
대표적인 예가 같은 상태는 한 출처에서 나와야 한다는 원칙을 지킬때인데, 같은 상태를 다른 출처에서 받아올 경우, 이 별도의 두 상태를 동기화(sync)하는 과정이 추가적으로 발생하고 이 과정에서 추가적인 문제가 발생할 수 있기에 전역 상태로 한번에 관리해주는 것이다.

이를 조금 어려운 말로 데이터 무결성을 위해 동일 데이터는 항상 동일한 곳에서 가지고 오도록한다고 하고, 이를 위한 방법론을 Single Source of Truth(신뢰할 수 있는 단일 출처)원칙이라 한다.

• 데이터 무결성 - 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것.

전역으로 상태를 관리하는 예
1. 라이트 모드, 다크 모드 테마설정
2. 앱의 언어설정

---

상태 관리 라이브러리

이렇게 전역 상태를 사용할때, 관리하게 편하게 해주는 라이브러리가 있는데, 대표적인 라이브러리 세가지가 React Context, Redux, MobX 이며 Redux를 공부해보려한다.

이 라이브러리들의 대표적인 기능은 전역 상태를 위한 저장소를 제공하는 것이다.
이로 인해 props drilling 문제 등을 해결할 수 있다.

여기서 props drilling이란, 예로 A 컴포넌트에 있는 상태를 A의 자식 컴포넌트인 B의 자식 컴포넌트인 C에서 활용하고 싶을때, B는 해당 상태가 필요없음에도 C로 props 해줘야 하므로 A로부터 상태를 받아와야한다. 여기서 C가 A로부터 전달되는 상태를 받는 것이 아닌, 전역 상태에서 받게된다면 해당 문제가 해결된다.

---

Redux

리덕스는 상태를 편하게 관리하게 도와주는 대표적인 라이브러리이다.

createStore()

store는 data를 저장하는 곳이다.
createStore()는 리덕스의 메소드이고 데이터를 찾고 수정하는 reducer 함수를 인자로 요구한다. 그리고 이 store 안의 data는 reducer 함수를 통해서만 수정할 수 있다.

이 리듀서가 리턴하는 것이 데이터가 되고, 리듀서가 인자로 있는 createStore의 인스턴스에서 getState()를 이용해 상태 값을 받아올 수 있다.

import {createStore} from 'redux';

const reducer = () => {
  return 'hello'
}

const store = createStore(reducer);

console.log(store.getState()) // 'hello' 

action & dispatch()

리듀서의 첫번째 인자로는 해당 리듀서가 다룰 데이터가 변수로 들어가고 두번째 인자로는 action이 오는데 이 해당 인자는 객체 형태로 dispatch({type:'value'}) 메소드를 이용해 리듀서 안에서 객체 action을 통해 데이터를 사용하게 할 수 있다.
위와 같이 store.dispatch({type: 'value'}) 와 같이 사용했다면, 리듀서 안에서 action 객체 안에 키가 type이고 값이 'value'인 프로퍼티가 생기는 것이다.

그리고 dispatch 해줄때 항상type이라는 키 값이 있어야한다.

import {createStore} from 'redux';

const reducer = (data, action) => {
  data = action.type
  return data;
}

const store = createStore(reducer);
store.dispatch({type: 'hello'});

console.log(store.getState()) // 'hello'

---

subscribe()

subscribe는 인자로 콜백함수를 받는 createStore의 메소드이다.
메소드를 사용한 createStore 인스턴스를 감시하며 해당 인스턴스의 데이터에 변화가 생겼을때 가지고 있는 콜백함수를 실행시킨다.

import {createStore} from 'redux';

const reducer = (data, action) => {
  data = action.type
  return data;
}

const store = createStore(reducer);

store.subscribe(()=>{
  console.log(store.getState())
})

store.dispatch({type: 'hello'}); // 'hello'
// dispatch 시켜줌으로 reducer 함수가 호출되고 결과적으로 store의 데이터가 변한다.
// subscribe 메소드로 store를 감시중이었으므로 바뀌는 순간에 콜백함수가 실행되고 
// 저장된 데이터가 콘솔에 로그로 남는다.

---

팁

1. reducer 내에서 action을 이용할땐 조건문 if else를 이용해도 되지만, dispatch로 보내는 데이터는 항상 action.type과 함께 받아오기에 많은 개발자들이 switch를 사용한다.

const reducer = (data, action) =>{
 switch(action.type){
   case "name":
     return data = 'sunghoon';
    case "future-job":
     return data = 'dev';
 } 
}

const reducer = (data, action) => {
	if(action.type === 'name'){
    	return data = 'sunghoon';   
    } else if(action.type === 'future-job'){
    	return data = 'dev'
    }
}

이 두 리듀서는 같다.

2. 고정된 문자열을 사용할때 같은 문자를 const로 선언하고 해당 글자를 할당하면 차후 오타로 인한 에러를 빠르게 감지할 수 있다.
   왜냐면 선언되지 않은 변수를 사용할땐 자바스크립트가 에러를 발생시키지만, 문자열의 경우 코드가 작동되지 않더라도 에러를 발생시키지 않기 때문이다.
   게다가 const로 선언했기에 중복도 방지된다.

---

TO DO 🔥

• 노마드코더 마저 듣기
• 리액트 훅 공부
• 리덕스 추가공부

Reference 🙇

리덕스 공부한 부분 - https://nomadcoders.co/