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

Question

안녕하세요 우선 강의 잘 듣고 있습니다^^ 동물 앨범 만들기 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}

효빈 Hyobin · Answer

안녕하세요 🙂 질문주셔서 감사합니다. this.setState 는 App 컴포넌트 내부에 작성되어있는 코드이기 때문에 ...this.state 를 실행하면 App 컴포넌트의 state 에 업데이트가 됩니다. 따라서 ...this.state 를 작성해주면, 기존 값인 currentTab: 'all', photos: [], 가 할당이 되는데요, 동물앨범에서는 사용하고 있는 상태값이 currentTab 과 photos 2개 이므로 ...this.state 를 굳이 작성하지 않아도 오류가 발생하지 않지만, 이후의 프로젝트에서는 ...this.state 를 통해 기존 상태값들을 유지해주는 것이 좋습니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. solarscw85님, 질문 주셔서 감사합니다. 주신 코드에서 this.setState({ ...this.state, currentTab: name, photos: await request(name) }) 는 리액트와 유사한 방식으로 상태를 업데이트하는 방식입니다. 여기서 spread 연산자(&hellip;) 를 사용하여 기존의 상태를 확장하는 것을 이해하는 것이 핵심입니다. ...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 - 리액트와 바닐라 자바스크립트의 상태 관리 비슷성을 다룬 내용입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.