► 검색페이지
구현기능
onClick, onKeyPress을 통해 검색결과페이지로 이동
withRouter 로 history, 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를 적용하여 값을 넘길 수 있기 때문이다.
덕분에 더 많은 공부가 된 부분이라고 생각한다.
검색결과페이지의 큰 틀은 다른 팀원분이 다 짜셨는데 기존에 맡았던 부분이 덜 끊나셔서 장바구니 필수구현 부분을 끝낸 내가 검색결과페이지의 기능부분만 맡았다.
대부분 틀은 다 짜 놓으셨기 때문에 컴디마, 컴디업 부분만 내가 다듬기만 했으면 됐다.
물론 잘생긴 승현멘토님의 도움이 정말 컸다.!
배운지 얼마 안된 쿼리스트링을 쓰다니..?!!!!! 초감격.
사실 아직 제대로 이해가 된 건지는 잘 모르겠지만 다음 프로젝트 때 적용하면 완벽히 이해 할 수 있을 거 같다.!
