[팀프로젝트] Lush clone-검색페이지

Now, Sophia·2021년 10월 17일
1

Project

목록 보기
8/16
post-thumbnail

► 검색페이지

구현기능
onClick, onKeyPress을 통해 검색결과페이지로 이동
withRouterhistory, match, location 객체 접근

onClick, onKeyPress

Search.js


  handleSearchResult = () => {
    const { searchWord } = this.state;
    if (searchWord.length > 0) {
      this.props.history.push(`/search-result?q=${searchWord}`);
      this.setState({
        searchWord: '',
      });
    }
  };

  enterSearchBtn = e => {
    if (e.key === 'Enter') {
      this.handleSearchResult();
    }
  };

handleSEarchResult는 onClick 이벤트에 해당되는 함수이다.
인풋창에 값이 1개 이상이어야지 클릭이 되게 했다.
withRouter를 통해 history 객체에 접근하여, 페이지 이동을 했는데 여기서 쿼리스트링을 이용했다.
왜냐면 검색어값을 파라미터로 넘겨줘야했기 때문이다.

* 쿼리스트링이란?

사용자가 입력한 데이터를 전달하는 방법 중 하나로 url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것

(`/search-result?q=${searchWord}`);

query parameters(?가 시작점)을 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것이다.
정해진 엔드포인트 url주소 다음에 ?를 쓰는것으로 쿼리스트링이 시작되는 것을 알린다.

엔드포인트주소?파라미터=값 (parameter=value) 객체형태.
만약, 파라미터가 여러개인 경우에는 &를 붙여 여러개 파라미터를 넘길 수 있다.

(`/search-result?q=${searchWord}&name=${name}`);
        <input
          name="inputSerach"
          className="searchInput"
          type="search"
          placeholder="더 풍성하게 돌아온 NEW 기프트"
          onChange={this.handleSearchWord}
          onKeyPress={this.enterSearchBtn}
          value={searchWord}
        />
        <button
          className="searchBtn"
          onClick={this.handleSearchResult}
          searchWord={searchWord}
        >
          <i className="fas fa-search fa-3x" />
        </button>

* 리팩토링을 한다면?

사실 파라미터로 넘기는 것보다 단순하게 컴포넌트를 활용하여 state,props로 넘길 수가 있다.
그러나 공부했던 동적라우팅, 쿼리스트링을 한 번 적용해보고 싶었다.


this.state = {
	searchWord : '',
}

<div>
	<SearchResult inputSearch={this.state.searchWord} />  
</div>

► 검색결과페이지

구현기능
* componentDidMount, componentDidUpdate를 통해 검색어결과값을 서버로부터 받고 검색어가 업데이트 될 때마다 결과값도 업데이트 시키기

* ComponentDidMount, ComponentDidUpdate

SearchResult.js


componentDidMount = () => {
    fetch(`${API.SEARCH}${this.props.location.search.split('=')[1]}`)
      .then(response => response.json())
      .then(result => {
        this.setState({
          products_list: result.products_list,
          products_count: result.products_count,
        });
      });
  };

  componentDidUpdate(prevProps) {
    if (
      this.props.location.search.split('=')[1] !==
      prevProps.location.search.split('=')[1]
    ) {
      fetch(`${API.SEARCH}${this.props.location.search.split('=')[1]}`)
        .then(response => response.json())
        .then(result => {
          this.setState({
            products_list: result.products_list,
            products_count: result.products_count,
          });
        });
    }
  }

componentDidMount는 딱 한번만 렌더되는 함수로
파일에서 constructer() -> render() -> componentDidMount() 순으로 진행된다.
검색어 결과값을 받아오기 위해 fetch주소에 검색어값을 전달했다.
split을 쓴 이유는 console.log로 search 객체에 어떻게 담겼는지 확인해보니 쿼리스트링부터 나오는 것이다.
search-result?q=우유
그래서 split으로 검색어인 우유만 서버로 요청되도록 전달했다.

* 그렇다면 왜 componentDidUpdate를 썼는가?

앞서 말했듯이 componentDidMount는 딱 한번만 렌더되기 때문이다.
그러면 검색어값이 업데이트 된다해도 적용이 안되기 때문이다.
componentDidUpdate를 통해 검색어값이 업데이트 될 때마다 setState로 값을 업데이트 해주는 것이다.

* 무한루프를 끊으려면..?

componentDidUpdate에 if문이 들어가 있는데, 이 이유는 무한반복이 발생하기 때문이다. 조건을 걸어 무한루프를 방지한다.

리액트공식문서 꼭 참고하기




🙋🏻‍♀️ Today,

첫 팀 프로젝트다 보니까 팀에게 민폐되지 않으려고 열심히 했다.
팀원들에게는 또 부담주지 않으려고 독려겸 첫프로젝트니 너무 부담스러워 하지말고, 할 수 있는 데까지 하자고 했다.

그래서 검색어입력페이지와 검색결과페이지까지 다른 팀원분과 분담하여 진행했다.
만약 분담하지 않았더라면 쿼리스트링까지 쓰지 않았을 거 같다.
바로 state, props를 적용하여 값을 넘길 수 있기 때문이다.
덕분에 더 많은 공부가 된 부분이라고 생각한다.

검색결과페이지의 큰 틀은 다른 팀원분이 다 짜셨는데 기존에 맡았던 부분이 덜 끊나셔서 장바구니 필수구현 부분을 끝낸 내가 검색결과페이지의 기능부분만 맡았다.

대부분 틀은 다 짜 놓으셨기 때문에 컴디마, 컴디업 부분만 내가 다듬기만 했으면 됐다.

물론 잘생긴 승현멘토님의 도움이 정말 컸다.!
배운지 얼마 안된 쿼리스트링을 쓰다니..?!!!!! 초감격.
사실 아직 제대로 이해가 된 건지는 잘 모르겠지만 다음 프로젝트 때 적용하면 완벽히 이해 할 수 있을 거 같다.!

profile
Whatever you want

0개의 댓글