🍎 모던 자바스크립트 Deep Dive
매일 책 15분동안 읽고 새로 깨달은 부분 정리
🌳 08장 제어문 - 8.5 continue 문
continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다.
if 문 내에서 실행해야 할 코드가 길다면 들여쓰기가 한 단계 더 깊어지므로 continue 문을 사용하는 편이 가독성이 더 좋다.
// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++){
if (string[i] === search){
count++;
// code
// code
// code
}
}
// continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i=0; i < string.length; i++){
if(string[i] !== search) continue;
count++;
// code
// code
// code
}🌳 09장 타입 변환과 단축 평가 - 9.1 타입 변환이란?
개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입변환 또는 타입강제변환이라 한다.
var x = 10;
// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성
var str = x + '';
console.log(typeof str, str); // string 10
// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10원시 값은 변경 불가능한 값. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것.
🍎 Redux
전역 상태관리 라이브러리
전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리(패키지)
- 전역상태 관리 라이브러리
- useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소
- 중앙 state 관리소(접근&제어)를 가지고 있으며, 모든 State는 이곳에서 생성됌.
- useState로 생성한 State는 Local State, 리덕스에서 생성한 State는 Global State
🌳 리덕스가 필요한 이유
useState의 불편함
-
컴포넌트에서 컴포넌트로 state를 보내기 위해서는 반드시 부-모 관계가 되어야 한다.
-
조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다.
즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) -
자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.
리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다.
🌳 Global state와 Local state
- Local state (지역상태) : 컴포넌트에서 useState를 이용해서 생성한 state
(좁은 범위 안에서 생성된 State) - Global state (전역상태) : Global state는 컴포넌트에서 생성되지 않음.
중앙화 된 특별한 곳에서 State들이 생성됌. (중앙 state 관리소)
중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용할 수 있게 됌.
이러한 값들을 관리하는 것을 전역 상태 관리라고 한다.
🌳 모듈
State의 그룹
- 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. (리듀서로 보낼 "명령")
- 디스패치란, 액션객체를 리듀서로 보내는 "전달자" 함수이다.
- 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을때 새로운 상태값을 만들어내는 "변화를 만들어내는" 함수이다.
- 디스패치(dispatch)를 사용하기위해서는 useDispatch()라는 훅을 이용해야 한다.
-디스패치는 스토어의 내장함수 중 하나임.
-우선, 디스패치는 액션을 발생 시키는 것 정도로 이해하면 된다.
-dispatch라는 함수에는 액션을 파라미터로 전달한다. (dispatch(action)) - 액션객체 type의 value는 대문자로 작성한다.
모듈의 구성요소
- initial State === 초기 상태값
useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치
// 초기 상태값
const initialState = {
number: 0,
}- Reducer === 변화를 일으키는 함수
리듀서 인자 첫번째 자리에서는 state를, 두번째 자리에서는 action이라는 것을 꺼내서 사용할 수 있음.
// counter 리듀서
const counter = (state = initialState, action) => {
switch (action.type){
default:
return state;
}
};
export default counter;state = initialState처럼 state에 initialState를 할당해줘야 한다.
- 카운터 모듈을 스토어에 연결하기
스토어
useSelector = 스토어 조회
컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 'react-redux'의 훅을 사용해야 한다.
useSelector의 사용법
// 1. store에서 꺼낸 값을 할당 할 변수를 선언한다.
const number =
// 2. useSelector()를 변수에 할당해준다.
const number = useSelector(()=>{})
// 3. useSelector의 인자에 화살표 함수를 넣어준다.
const number = useSelector(()=>{})
// 4. 화살표 함수의 인자에서 값을 꺼내 return 한다.
const number = useSelector((state)=>{
return state
})화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 리덕스 모듈의 state
🌳 Action Creator
액션을 만드는 생성자. 액션객체를 만드는 함수.
- Action Creator는 모듈 파일 안에서 생성된다.
- 액션객체의 type value로 상수로 생성해서 관리한다.
- Action Creator를 사용하면, 여러가지 문제점을 해소할 수 있다.
🌳Ducks 패턴
- Reducer 함수를 export default 한다.
- Action creator 함수들을 export 한다.
정리
- 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
- payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.
- 리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.
- ES6에서 객체를 생성할 때 key와 value가 같으면 축약해서 작성할 수 있다.
- Ducks 패턴은 Erik Rasmussen이 제안했고, 현재 리덕스 모듈 작성방법의 정석으로 여겨지고 있다.
