-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
질문드립니다 .
23.10.03 01:35 작성 조회수 103
0
switch (action.type) {
case "INIT": {
return action.data;
}
case "CREATE": {
const newItem = {
...action.data,
};
newState = [newItem, ...state];
break;
}
case "DELETE": {
newState = state.filter((it) => it.id != action.targetId);
break;
}
case "EDIT": {
newState = state.map((id) =>
it.id === action.data.id ? { ...action.data } : it
);
break;
}
default:
return state;
}
return newState;여기에 보면 ...으로 객체 깊은 복사? 하는거 같은데 만약에
CREATE 쪽
const newItem = {
...action.data,
};
newState = [newItem, ...state];
대신
const newItem = {
action.data,
};
newState = [newItem, state];
으로 썼을떄 차이점Edit쪽
newState = state.map((id) =>
it.id === action.data.id ? { ...action.data } : it
대신
newState = state.map((id) =>
it.id === action.data.id ? { action.data } : it
으로 썼을떄 차이점
INIT 쪽
return action.data;
왜 이건 action.data를 바로 newState에 저장안시키고 리턴하는지 궁금합니다.
답변을 작성해보세요.
0
이정환 Winterlood
지식공유자2023.10.04
안녕하세요 이정환입니다.
순서대로 답변 드릴게요 😃
우선 첫번째로 객체 프로퍼티를 정의할 때 ...action.data 처럼 전개 연산자를 사용하지 않을 때에는
아래 예제의 2번 버전처럼 문법 오류가 발생하게 됩니다.
// 1번 버전
const newItem1 = {
...action.data,
};
newState = [newItem, ...state];
// 2번 버전
const newItem2 = {
action.data,
// ^^^ 오류 발생
};
newState = [newItem, state];그 이유는 자바스크립트 기본 문법상 객체 리터럴을 정의 할 때에는 프로퍼티의 이름을 명시해야 하기 때문입니다. 다만 예외적으로 아래 예제 코드 처럼 변수 이름을 key로 변수의 값을 value로 설정할 때에는 프로퍼티의 이름을 생략할 수 있습니다.
const name = "이정환";
const obj = {
name,
};
console.log(obj);
// 출력 결과 : { name : "이정환" }마지막으로 reducer 내부에서 action.type의 값이 "INIT" 일 때 곧바로 action.data를 리턴하는 이유는 초기화 시에는 로컬스토리지에 변경된 값을 저장할 필요가 없기 때문입니다.
구체적으로 이야기하자면 action.type의 값이 INIT이 아닌 CREATE, UPDATE, DELETE 때에는 변경된 일기 데이터를 로컬 스토리지에 반영해야 하기 때문에 newState라는 변수에 변경된 State의 값을 저장했습니다.
그러나 action.type의 값이 초기화를 의미하는 INIT일 때에는 로컬스토리지에서 불러온 값으로 State의 값을 초기화 하는 작업에 해당하므로 로컬 스토리지에 동일한 값을 갱신할 이유가 없어 곧바로 action.data의 값을 반환하는 것 입니다.
답변 1