React 'Monster' (filter함수를 통한 검색기능)

React Monster 과제 각 문항에 대한 풀이와 검색기능 구현에 대해 기록해둔다. 이번 과제를 통해 세션때 배웠던 React의 주된 특성과 자주 쓰이는 기능들을 복습할 수 있었고, 내가 무엇이 부족하고 더 보충해야하는지 잘 알게되었다.

1️⃣ API호출

• componentDidMount()사용
• fetch() + 호출 API 주소
• setState() -> state 객체 내에 monsters라는 key값에 저장
  

✅ 외부에서 데이터를 가져올때 필수적으로 사용하는 API호출 기능이다. 단순히 각 구문, 구문들이 어떤 역할을 하는지 제대로 짚고 넘어갈 필요가 있다고 느꼈다. API를 통해 넘겨받는 data는 명칭을 알기쉽게 하기 위하여 res대신 data라는 명칭으로 바꿨다.

API호출 관련 공부할만한 참고사이트

• https://yeri-kim.github.io/posts/fetch/ (fetch()함수 사용법)
• https://ko.reactjs.org/docs/react-component.html#componentdidmount (react 생명주기 관련 공식문서)

2️⃣ API 호출의 결과값 props로 자식에게 전달

• API호출 후 저장한 배열을 자식 컴포넌트인 에 넘겨주기

• 넘겨준 후 CardList.js에서 props를 콘솔에 찍어 확인
  

• React의 핵심기능 부모에서 API로 호출한 데이터를 props로 자식에게 전달하는 기능을 구현하는 것이다.

• props 전달 시 부모, 자식 컴포넌트 별 코드는 위와 같다.

✅ Reactd의 핵심 기능인 만큼 props를 전달하는 것은 항상 익숙해야하며, 사용에 어려움이 없어야한다. 데이터가 잘 넘어갔는지 콘솔로 확인할때는, React의 구조적 특성을 잘 알고 console.log 사용해야한다 console.log는 render()안 / return()이 시작하기 전에 사용한다.
문제처럼 state의 데이터를 props를 넘겨준 것을 확인할 때 console.log를 사용하는 경우에는, 콘솔의 결과값으로 state안의 본래 초기값, 데이터를 불러와 추가된 후 값 2개로 나타나는 점 참고해두자. (검색기능 구현을 위해 CardList 컴포넌트에 searchMonster라는 객체를 전달해주었다. 검색기능을 구현하지 않는다면 this.state.monsters를 넣어주면 된다.)

3️⃣ Array.map() 사용

• 넘겨받은 배열을 기준으로 Array.map()함수를 활용하여 컴포넌트를 리턴

✅ Array.map()는 React를 더욱 빛나게 하는 핵심 함수다. 많은 괄호로 묶여있어 코드를 치고 사용하는 것이 서툴지만, 능숙하게 쓸 수 있을 정도로 익숙해져야겠다.(물론 기능과 구현원리를 이해하는 것은 필수다.)

4️⃣ props활용

✅ 컴포넌트에 props를 받는 단계이다. props 사용 시에는 구조분해 할당을 사용하는 것이 가독성, 효율성 측면에서 좋다. 문제에서는 url에서도 props 적용을 요구하고 있다. 이것은 Template literals을 통해 사용법을 알 수 있었다.

참고 사이트

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals (Template literals에 대하여)

5️⃣ 검색기능 구현 - filter함수 사용

추가적으로 알파벳을 입력하면, 해당 알파벳이 이름에 들어가는 몬스터만 보여주는 검색기능을 구현하였다. 이전에 westagram에서 구현했던 댓글삭제기능처럼 filter함수를 사용하여 monsters의 state data배열을 검색어를 입력할때마다 새로운 배열로 바꿔주는 방법을 먼저 시도하였다.

✅ 그러나 해당방식을 사용하면 monsters props의 원본 데이터(API로 받은 데이터)가 수정되어 이전 데이터로 되돌릴 수 없다는 문제점을 발견하였다. (즉 검색어를 지우면 필터링 전 배열상태로 돌아갈 수 없었다. filter함수는 필터링 후에 복원까지는 해주지 않는다.)

🤣 이를 해결하기위해 함께 공부했던 동기들의 의견을 받아, 검색어를 입력할때마다 monsters의 값을 저장하여, backspace버튼을 누르면 저장했던 이전 monsters의 값을 반환하는 방식을 고민해보았지만 검색어를 역순으로 순차적으로 지운다는 보장도 없어 쉽지 않을거라 생각했다.

그래서 구글링을 통해 다음과 같은 방법을 알게되었다. (이 방법을 알게되는 순간 새로운걸 발견한 듯한 짜릿함이 있었다.) 'userInput'이라는 또 다른 props를 만들어, 'handleChange'라는 이벤트의 target이 가지는 value값이 props에 저장되는 함수를 만들었다. 그리고 Card 목록을 구현하는 'CardList'컴포넌트에 filter함수를 사용하여 검색어를 포함하는 monster 요소만 추출하는 객체를 전달하였다. setState방식이 아니기때문에 검색어가 바뀌면 조건에 만족하는 monster 데이터값만 바뀔뿐 monsters의 데이터는 수정되지 않아 검색어를 지울때 복원도 가능하였다.
(동적 기능에 따라 데이터가 변경될 경우, 원본 데이터를 setState하는 것은 다양한 경우를 고려하여 신중하게 결정해야한다.)

이번 과제를 통해 알게된 부족한 부분은 주말을 통해 보충할 수 있도록 해야겠다. React라는 괴물에 쫓기지말고 React 괴물이 되버리자!😈