동물 앨범 만들기 2-2 문의

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

2. 동물 앨범 만들기-2-2

해결된 질문

작성

안녕하세요

우선 강의 잘 듣고 있습니다^^

동물 앨범 만들기 2-2를 진행하다가 문의 사항이 있어 글을 남겨 봅니다.

아래 코드에서 this.setState에 ...this.state 값을

넣어주면서

"spread(…) 연산자를 사용해서 기존의 상태를 유지해주고" 라고 설명을 해주셨는데요

이 부분이 이해가 잘 가지 않아서요~

this.setState({ ...this.state,

currentTab: name,

photos: await request(name),

});

setState 함수

newState 매개변수에 { ...this.state,

currentTab: name,

photos: await request(name),

} 객체 값이 들어가면서 ...this.state 값은 어디 값에 들어가게 되서

기존 상태를 유지한다고 봐야 될까요??

export default function App($app) {
7    this.state = {
8        currentTab: 'all',
9        photos: [],
10    };
11
12    const tabBar = new TabBar({
13        initialState: '',
14        onClick: async (name) => {
15            this.setState({
16                ...this.state,
17                currentTab: name,
18                photos: await request(name),
19            });
20        },
21    });
22
23    const content = new Content();
24
25    this.setState = (newState) => {
26        this.state = newState;
27        tabBar.setState(this.state.currentTab);
28        content.setState(this.state.photos);
29    };
30}

javascript rest-api spa dom

답변 2

효빈 Hyobin

지식공유자

안녕하세요 🙂 질문주셔서 감사합니다.

this.setState는 App 컴포넌트 내부에 작성되어있는 코드이기 때문에
...this.state 를 실행하면 App 컴포넌트의 state에 업데이트가 됩니다.

따라서 ...this.state를 작성해주면, 기존 값인 currentTab: 'all', photos: [], 가 할당이 되는데요, 동물앨범에서는 사용하고 있는 상태값이 currentTab과 photos 2개 이므로 ...this.state를 굳이 작성하지 않아도 오류가 발생하지 않지만, 이후의 프로젝트에서는 ...this.state를 통해 기존 상태값들을 유지해주는 것이 좋습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. solarscw85님, 질문 주셔서 감사합니다.

주신 코드에서 this.setState({ ...this.state, currentTab: name, photos: await request(name) })는 리액트와 유사한 방식으로 상태를 업데이트하는 방식입니다. 여기서 spread 연산자(…)를 사용하여 기존의 상태를 확장하는 것을 이해하는 것이 핵심입니다.

...this.state의 역할:
- ...this.state는 this.state 객체의 모든 속성을 복사하여 새로운 객체를 생성하도록 도와줍니다. 따라서, 기존 상태를 유지하면서 변경하고자 하는 부분만 쉽게 덮어쓸 수 있게 됩니다.
기존 상태의 유지:
- 새 객체를 만들 때 ...this.state로 기존의 상태를 우선 복사합니다.
- 이후 덮어쓰려는 속성들 (currentTab과 photos)을 지정하여 새로운 값을 할당합니다.
- 이렇게 만들어진 newState 객체는 this.setState에 전달되어 this.state를 갱신합니다.
실제 동작:
- 새로운 상태 객체는 { currentTab, photos }로 지정된 속성만 덮어쓰면서, 나머지 속성(다른 미변경 요소들)은 그대로 유지됩니다.

이해를 돕기 위한 간단한 예를 들면, 기존 상태가 다음과 같다고 가정해 봅시다:

this.state = {
  currentTab: 'all',
  photos: [],
  anotherProperty: 'value'
}

this.setState 호출 후의 상태:

{
  currentTab: name,  // 상태가 갱신됨
  photos: ... ,      // 상태가 갱신됨
  anotherProperty: 'value' // 기존 상태 유지됨
}

관련 질문 URL:
- 상태관리와 SPA - 리액트와 바닐라 자바스크립트의 상태 관리 비슷성을 다룬 내용입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

동물 앨범 만들기 2-2 문의