- 분류 전체보기 (474)
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 리덕스
- 정재남
- 백준
- 프로그래머스
- 코드스테이츠
- 토익 900
- 자바스크립트
- 제로초
- SQL 고득점 Kit
- 리액트
- 타임어택
- 타입스크립트
- 4주 프로젝트
- 파이썬
- 타입스크립트 올인원
- Async
- javascript
- 토익
- til
- 알고리즘
- 2주 프로젝트
- LeetCode
- 렛츠기릿 자바스크립트
- 코어 자바스크립트
- js
- programmers
- HTTP
- 손에 익히며 배우는 네트워크 첫걸음
- 회고
- codestates
- Today
- Total
Jerry
til #18 본문
오늘 한 것
React로 NodeBird SNS 만들기 강좌에서 Redux 연동하기, 리덕스 파트를 끝내는 것이 목표였다.
하지만, 다 못 끝냈다
배운 내용
버전 6들어와서 Provider로 페이지를 감싸주는게 자동으로 되도록(생략되어 알아서 감싸준다) 업데이트돼서 한 번더 쓰면 중복처리가 된다.
return (
<Provider store={store}>
<Head>
<meta charSet="utf-8" />
<title>NodeBird</title>
</Head>
<div>공통메뉴</div>
<Component />
</Provider>
);
리덕스 - 중앙 데이터 저장소 역할
- 컨텍스트api, mobex, redux의 가장 큰 차이점은 비동기를 지원하기 쉽냐? 어렵냐? 보통 중앙 저장소가 있다면, 서버에서 데이터를 많이 받아오고 비동기로 받아온다. 데이터를 받는건 100%가 아니다. 실패를 대비해야한다. 비동기는 3단계로 나뉜다. 요청→ 성공(받는것)→ 실패
- 컨텐스트api는 3단계를 직접 만들어줘야한다.
- 아래와 같은 코드가 컴포넌트에 많이 들어간다. 내가 생각하기엔 컴포넌트는 화면 그리는 것만 집중하면 좋다. 데이터까지 다루는건 컴포넌트의 역할이 아닌거 같다.그래서 별도의 요청을 안 하는 편이고 별도의 요청은 별도의 모듈이나 라이브러리가 해야된다고 생각한다. 또한, 의도치않은 코드 중복도 발생한다.
- 컨텍스트api와 비동처리하는거 구현해보니깐 리덕스랑 모벡스랑 굉장히 비슷하다고 느낄거다. 비동기요청이 많다 싶으면 처음부터 리덕스나 모벡스부터 쓰는거죠.
리덕스의 원리
리듀스에서 이름을 따온거거든요. 데이터 중앙 저장소가 있다고 가정해볼게요.
type이 액션의 이름입니다. 이 액션을 디스패치하는 순간 원래 데이터가 변경됩니다.
그런데 무조건 액션을 디스패치한다고 저장소에 있는 원래 데이터가 zerocho에서 boogiecho로 변경되는 것은 아니다.
왜냐하면, 자바스크립트는 'CHANGE_NICKNAME'이라는 뜻을 모르기 때문이죠.
그래서 직접 리듀서에서 일일이 어떻게 바뀌어야하는지 적어줘야해요. 그래서 코드양(switch문)이 엉청 많아지게 되어요. (단점)
- 대신에 해당 기록이 다 남아서 어디서 에러가 발생했는지 디버깅이 쉬워질뿐더러 히스토리가 기록되어서 걔를 뒤로 감았다 앞으로 갔다 같은 타임머신 기능을 활용할 수 있다.
리턴문이 아래와 같이 생긴 이유는
1. 불변성(immutability) 때문이다.
자바스크립트에서 조심해야하는게 {] === {}는 false, const a = {}; const b = a; a === b는 true다.
즉, 객체를 새로 많는건 false인데 참조관계면 true가 나오는 이런 관계를 잘 활용해야한다.
항상 다른 객체를 리턴하는 거에요. 내가 바꾸고 싶은것만 바꾸고, 'CHANGE_NICKNAME'이니깐. 바꾸고 싶은것만 바뀌고 나머지는 그대로 두지만 객체 자체는 새로만들어서 보내준다. 객체를 새로 만들어야 추적이 가능해져요.
const prev = { name: 'zerocho' }
const next = { name: 'boogicho' }
만약에 직접 바꿔버리면 어떻게 될까요?
const next = prev;
next.name = 'boogicho'
prev.name; // boogicho
예시처럼 참조관계로 인해 이전 데이터 영향을 받게 되어 이전 히스토리가 없어지게 됩니다.
2. 그렇다면 1번 방법처럼 리턴하지 말고 전체다 리턴하면 되지 않나? 하는 의문이 들 수 있다.
왜 이렇게 하지 않냐면 타자가 길어져서라는 점도 있겠지만 메모리를 아끼기 위해서가 있다.
액션 하나 실행할 때마 새로운 객체가 실행되니깐 메모리를 많이 잡아먹어요.
그래서 바뀌는 것만 바뀌도록 하고 안 바뀌는건 참조관계로 두어 메모리를 아끼도록하는 하는 것이다.
개발 모드에서는 히스토리를 가지고 있다는 것이 어딘가에 메모리를 저장하고 있다는 거잖아요. 액션 하나하나 호출할 때마 커지지만 배포 모드에서는 히스토리 보는 기능이 필요없어서 계속 버려줘서 메모리 문제가 없어요.
비구조할당 예시 코드
스토어란?
스토어는 state와 리듀서를 포함한것이라고 보면 돼요.
