Monster 과제 (react, map함수, 컴포넌트)

 

 

 

 

 

 

슬슬 감이 잡히기 시작한 react!

 

 

 

 

 

프젝 전 금요일에 위코드에서 요 monster 과제를 주셨다

 

 

 

 

 

 

 

 

 

 

 

바로 이렇게 👆

해당 페이지에 몬스터 카드를 불러와 map 함수를 써서 각각 불러오면 되는 것!

 

그리고 카드 정보를 받는 컴포넌트 (여기서 맵) - CardList.js

카드 구성을 받는 컴포넌트 (카드 정보를 받아 구성을 만듬)  - Card.js

각각 나누어야했다

 

react에서 다뤄왔던 fetch(), map() 그리고 컴포넌트 나누기를 해보는 좋은 연습 같아 여러번 실습해보았다

 

 

 

 

 

 

 

 

 

 

1️⃣ 카드 정보 가져오기

 

 

1. 카드 정보 가져오기 , useEffect ( import useState 잊지 않기)

1-1. useEffect - fatch 메서드 ( import useEffect 잊지 않기)

1-2. useEffect(()=>{},[] ) 첫 mount 할때만 불러오기 때문에 빈 인자성 배열을 넣어줌

1-3. fetch 알맞게 넣기// fetch("url", {method : "GET" }); 이 맞으나 get은 디폴트므로 생략 가능

2. .then 마지막에 (result) => console.log(result)써서 정보 제대로 가져오는지 확인하기

 

 

 

 

 

 

 

 

 

 2️⃣ (1️⃣에서)받았던 카드 정보를 CardList.js 컴포넌트로 옮기기

3️⃣ CardList.js 에서 받은 카드 정보를 map 함수를 사용해  <Card /> 컴포넌트 만들기 (이때 id, name, email 을 props 로 넘김)

 

 

👆 CardList.js

monsters.id -> monster.id

monsters.name -> monster.name

monsters.email -> monster.email

 

 

👆 Monsters.js

 

 

 

 

1. map 함수 쓰기 전에 정보가 제대로 가는 지 리턴 위에 콘솔 찍어보기

2. 제대로 간다면 map 함수 쓰기

2-1. {monsters.map(() => {return Card.js로 넘겨줄 값} )

3. id, name, email 넘기기

3-1. map 함수에선 고유한 키 값이 필요함으로 key 를 써줌 (이때 id 값이 고유하니 monster.id)를 넣어줌

 

 

 

 

 

👆 Card.js

 

 

 

 

1. 카드 형식에 맞게 구성 넣기

2. CardList 에서 넘겨준 값 인자로 받기 ( { id, email, name } )

3. src 넣을 때 각 이미지마다 값이 있으므로 고유한 id를 적어줌 ( map 함수에서 미리 설정함 )

 

 

 

 

 

 

 

 

 

 

 

4️⃣ 히든 과제! 검색창을 넣고 monster 이름에 맞는 Input이 들어갔을 경우 그 카드만 보이게 하기

 

 

👆 Monsters.js

 

 

👆 SearchBox.js

 

 

 

 

 

1. useState 만들기 (userInput, setUserInput) 

2. SearchBox.js input에 onChange 걸기

3. Onchange 될 때마다 상태값 저장하기 위해 inHandleChange

4. props로 전달하는 handleChange에 {inHandleChange}를 연결

5. 이때 콘솔 찍어서 (userInput) 값 확인 함

6. userInput 값과 monster.name 값 확인하기 ( 이때 반환한 값을 변수에 저장)

6-1. 변수 sortedMonsters 만든 후 filter 사용

6-2. monsters.filter(monster) => {monster.name.include(userInput)}

6-3. 이때 sortedMonsters 콘솔에 찍어서 filter 되는 지 확인

6-4. input 값, 비교하는 값 둘 다 소문자로 만들어서 비교하기 (이때 toLowerCase() 사용)

6-5. 다시 콘솔 찍어보고 원하는 값 나오는지 확인

7. 원하는 값만 화면에 렌더링하기

7-1. CardList.js 로 가서 해당 리턴된 배열만 나오게끔 <CardList monster={sortedMonsters} /> 로 바꿈

 

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

완성!

 

 

 

 

 

🎉

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

후기

 

 

 

 

 

 

처음엔 너무 막막했는데 이렇게 쓰고 보니 즐겁게 한 거 같다 ☺️

fetch 도 써봐서 좋았고 ( 코로나 걸려서 로그인 실습 못 함 ㅠㅠ)

useEffect 도 늦게 나마 써 볼 수 있어서 좋았다

 

clean up이랑 목업도 어떻게 쓰는 건지 해보고 싶은데 이건 위스타그램 수정하면서 가능하다면 써볼 생각이다

시간이 날 진 모르겠지만...😂

 

 

 

 

 

그리고 실습하면서 재밌는 일이 있었다

 

 

cardList.js 에서 인자 줄 때

 

 

 

monster.id 가 아닌 monsters.id 로 s를 붙여 잘못줬는데

 

 

 

👆 이렇게 나와서 너무 당황했다... 아니 누구세요

 

 

 

별 거 아니지만 처음엔 당황함...

 

코드를 살펴보며 ( 콘솔 찍으면서 실습하니 이게 편했다 )

바로 고치긴 했지만

 

넘... 이상한 얼굴이라... 계속 잔상이 남음...

 

 

 

그리고 다 만든 후

monsters 중 대장인가 싶어서

쟤 이름이나 뭔지 알아보려고 찾아봤는데

 

 

 

이 중에 없었다...

아니 진짜 누구세요 

 

 

 

 

 

그냥 대표 이미지였을까... 😂

ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

👋👋