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

흔들거북이님의 프로필 이미지
흔들거북이

작성한 질문수

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[검색결과] 검색결과 초기화(풀이)

reset 시점에 searchResult 빈 배열로 update

작성

·

214

2

안녕하세요. 이번 수업에서 사소한? 궁금증이 생겨서 질문 남깁니다!

 

  handleReset() {
    this.setState(() => {
      return { 
        searchKeyword: "",
        // searchResult: [],
        submitted: false,
      }
    }, () => {
      // console.log("TODO: handleReset", this.state.searchKeyword);
      console.log("TODO: handleReset", this.state.searchResult); // 이전 검색 결과가 그대로 저장되어있음.
    });
  }

 

위의 handleReset 메서드 실행시, 저 같은 경우엔 주석 친 부분처럼 this.state.searchResult를 빈배열로 무조건 갱신해줘야 한다고 생각 했습니다.

 

이유는, reset의 동작이 검색 결과 부분에 아무것도 노출하지 않는다는 점 때문에, 검색 결과를 저장하고 있는 searchResult 역시 같이 비워줘야 하지 않나 라는 생각이 들었기 때문입니다.

 

물론 현재로서는 this.state.submitted으로 노출 제어를 하고 있는 상황이기 때문에 동작에는 전혀 문제가 없긴 하지만요...!

 

사소한 부분이긴 하지만.. 혹시 강사 님께서는 이 부분에 대해서 어떻게 생각하시는지 여쭤보고 싶습니다!

답변 2

1

김정환님의 프로필 이미지
김정환
지식공유자

이미 답을 찾으셨을 것 같은데요. 지적해 주신것처럼 배열도 초기화 해주는 것이 안전합니다. 영상에는 없지만 다음 브랜치(react/search-result-4)로 이동하면 해당 코드가 있을 거에요.

중요한 부분 놓치지 않고 말씀해 주셔서 감사합니다.

-1

안녕하세요, 인프런 AI 인턴입니다.

흔들거북이님의 질문과 유사한 문제들에 대한 해답을 이미 다룬 기존 게시물을 찾아본 결과, 아래와 같은 내용이 유용할 것 같습니다.

관련 질문: reset() 함수 작성 관련 문의드립니다.

이 질문에서는 Controller에서 Store의 reset() 함수를 호출하는 방식과, Controller에서 직접 store의 상태값을 변경하는 두 가지 방식에 대한 비교와 강사님의 의견이 공유되었습니다. 비록 정확히 this.state.searchResult를 빈 배열로 갱신하는 문제를 다루지는 않지만, 상태 관리와 관련하여 reset() 함수를 어떻게 다룰지에 대한 유용한 관점을 제공합니다.

또한, 검색 결과를 바로 hide 하는 방법에 대한 문제점이 있는지 질문이 있습니다. 이 질문은 searchResult의 상태 관리 대신 뷰를 직접 조작하는 방식에 대한 의문을 제기하고 있으며, 강의에서 상태를 변경하여 UI를 제어하는 의도에 대해 설명하고 있습니다. 비록 문제 상황이 다소 다르지만, 검색 결과 관리와 관련된 전반적인 설계 철학을 이해하는 데 도움이 될 것입니다.

이러한 질문과 답변은 searchResult를 빈 배열로 업데이트하는 것이 타당한지에 대한 흔들거북이님의 궁금증에 대한 통찰을 제공할 수 있을 것입니다. 상태 관리의 원칙과 UI 반영 방식에 대한 강사님의 관점을 확인하실 수 있을 것입니다.

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

흔들거북이님의 프로필 이미지
흔들거북이

작성한 질문수

질문하기