React - Monster 때려잡기

지금까지 배웠던 리액트 기초 개념을 적용하고 응용하여 훨씬 React 스러운 미니 프로젝트 Monster 과제!

🚀 학습 목표

1. useEffect()훅을 통해 data fetching 등 컴포넌트 렌더링 이후 필요한 다양한 side effect(부수효과)를 일으킬 수 있다.
2. fetch() 함수를 사용해 API 호출을 할 수 있다.
3. Array.map() 함수를 통해 component를 재활용할 수 있다.
4. props 를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터를 전달할 수 있다.
5. Array.filter() 를 통한 검색기능을 구현할 수 있다. (Optional!)

:: 구현 목표 (해당 브랜치에서 구현하고자 하는 하나의 목표를 설정합니다.)

• Task 1. Monster 카드 데이터 전달받아 카드 리스트 형태로 화면에 렌더
• Task 2. 필터링 로직 구현 (filter 메소드 활용)

:: 구현 사항 설명 (작업한 내용을 상세하게 기록합니다.)

1. Monster 카드 데이터 전달받아 카드 리스트 형태로 화면에 렌더

• Monster.js 에서 fetch 함수를 활용해 API 를 호출하고 이를 useState에 저장
• API 호출의 결과값을 props 로 CardList 컴포넌트에게 전달
• CardList 컴포넌트에서 넘겨받은 데이터를 기준으로 Array.map( ) 사용하여 Card 컴포넌트를 리턴
• props를 활용하여 Card 컴포넌트에 각 몬스터 객체의 id, name, email를 전달
• Card 컴포넌트 안에 전달받은 props 값을 사용할 부분에 적용

1. 필터링 로직 구현 (filter 메소드 활용)

• Monster.js 에서 SearchBox 컴포넌트에 정의한 handleChange 메소드를 전달호출 시 인자로 들어오는 이벤트 객체를 활용하여 userInput 으로 setState
• Monster.js 에서 fetch 함수로 전달받은 데이터를 저장한 useState에 filter 메소드를 활용toLowerCase() 메소드를 활용해 소문자로 바꾼 monster.name 값에 userInput 값이 포함되어 있으면그 값을 모아 새로운 배열로 반환해주는 변수를 설정
• fetch 함수로 받아온 데이터를 응답받은 후의 로직을 삼항연산자를 활용하여 필터링 로직을 구현userInput 값이 있으면(true) 필터링 배열이 monsters에 저장되고, 없으면(false) 원래의 배열이 저장되게함이때 의존성 배열엔 userInput 을 적어주어 input 에 값이 변할 때 렌더링 될 수 있도록 설정
• input 값이 Moster의 name 과 일치할 때 필터링이 되어 해당 카드만 보여줌

:: 성장 포인트 (해당 기능을 구현하며 고민했던 사항이나 새로 알게된 부분, 어려웠던 점 등을 작성합니다.)

• Monster 과제를 통해서 foundation 기간동안 배웠던 것들을 한번씩 복습해볼 수 있어서 좋았습니다.또한 추가 과제를 통해서 filter 메소드를 쓰는 방법을 알게 되었습니다. filter 메소드는 처음 써봐서 공식문서를 참고해도 이해가 어려웠는데,동기분이 해당 메소드를 익힐 때 본인이 직접 예제를 만들어 이해했던 방식을 공유해 준 덕분에 과제를 수월하게 해결할 수 있었습니다.도움을 받는 데에 그치지 않고, 저 역시도 남들에게 도움을 줄 수 있을 만큼 더 노력 해야겠다고 다짐하였습니다.

• 삼항 연산자를 써서 필터링 로직을 구현할 수 있다는 동기분의 말씀에 따라 연습해 보았습니다.머릿속으로는 해당 로직이 이해됐지만, 생각하는 대로 코드를 작성하는 데에 어려움을 느꼈습니다. 동기들과 같이 해당 로직에 대해 같이 고민해보고 여러 방법을 적용해보며 기능 구현하는데 성공할 수 있었습니다.

• 삼항연산자를 통해 구현할 때 의존성 배열을 빈배열 형태로 적어두었더니 input 값을 아무리 적어도 화면이 바뀌지 않았습니다.console.log로 확인해봤더니 콘솔창에서는 필터링 기능은 제대로 구현되고 있었습니다. 다시 useEffect의 기능을 생각해보니 의존성 배열을 빈배열로 두면 페이지가 처음 렌더될 때 딱 한번 렌더되고 변경에 따른 재렌더는 이루어지지 않는다는 것이 떠올랐습니다.의존성 배열에 input 창에 값이 변경될 때의 state 값을 넣어 해당 오류를 해결할 수 있었습니다.