Task 2. API 호출의 결과값 props 로 자식에게 전달
componentDidMount()란 무엇일까
컴포넌트를 연동시켜주는것
componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()) .then((res) => this.setState({ monsters: res })); }
하나씩보면
- fetch함수 안에 있는 것들은 각 카드에 대한 정보가 담겨져있다
이런식으로 쭉 있다. - 첫번째 then은 .then((respone) => respon.json()) 저 위에 있는 배열들을 json으로 우리가 알아 볼 수 있도록 변경해 준 것이다. (respone이름은 내가 맘대로 변경해도됨.)
여기서 respone은 fetch함수 안에있는 주소의 정보들이다. - 두번째 then은 .then((respone) => this.setState({ monster: respon }));
setState 즉 state를 세팅해줄건데. ()안에 있는 것들로 세팅 할거야.
{monster : res}에서
{}는 처음에state ={} 이안에 monsters:[]이게 있어서 그런 것이다.
{}는 jsx에서 js를 표현할 때는 스트링 뺴고 {}를 쓴다??? jsx문법에서 html형식과 짬뽕될 때 js랑 구분시켜주려고 중괄호 쓴다고 생각해 멍청아
즉 
여기에 있는 monsters:[]이 안에 res가 들어가는것이다.
Task 2. API 호출의 결과값 props 로 자식에게 전달
CardList.js(카드리스트 컴포넌트)를 Monsters.js에 호출해 state를 props로 받은 것이다.
이렇게 자식 컴포넌트에 넘김 이름을 monsters로 하고
monsters={filterMinster}는 뒷쪽에 상세히
Task 3. Array.map()사용
- 넘겨받은 배열을 기준으로
Array.map()함수를 활용하여<Card />컴포넌트를 리턴해주세요. Card.js에게 넘겨줘야하는 props 는 각 몬스터 객체의id,name,email입니다.
위에서 componentDidMount()로 monster =[] 이안에 정보를 넣어져있다
- 이게 monster =[]에 들어 있는데 map으로 배열안에 있는 객체 이걸 Card컴포넌트안에 작성 후 리턴
- 이렇게 여러 객체 덩어리가 들어있는데 그 객체 덩어리 el을 하나 하나를 monster라고 정함.
- 그 monster의 id를 key와 id라고 부르고, name을 name으로, email을 email이라고 이름을 지어줌
이렇게 Card컴포넌트에 위에서 작성한 props를 받아온다.
Task 4. props 활용
여기에서 img는 src는 저 ${this.props.id}이 부분의 id숫자만 바뀌기 때문에 부모의 id를 받아옴
밑에 h2태그, p태그도 부모에게서 받은 props를 활용
Task 5. filter적용
render()에서 filterMonster는 검색창에 입력한 이름에 해당하는 데이터만 화면에 보여줘야 되는데, 실시간으로 값이 바뀌는 모습을 화면에 보여줘야 되서 render안에 있는것
- filterMonster 변수를 만들어 그 안에 monsters를 state로 받아 그 안에 있는 배열들을 filter 해준다
- 그 el을 monster라고 이름을 정해주고 그 monster 즉 하나의 el의 name을 .toLowerCase로 문자열을 소문자로 변환한다
- 그 뒤에 includes로 userInput(사용자가 입력한 값)도 toLowerCase()로 바꿔준다
- handleChange 함수에서 어떤 이벤트가 실행됬을 때 userInput의 값에 실행한 이벤트의 값을 넣어준다.
- SearchBox 컴포넌트에 위의 함수handleChange를 this로 받고 그것을 handleChange라고 이름을 정해줌
- SearchBox.js에서
onChange에서 부모에 한테서 handleChange를 props로 받는다
다시 알게된 점
-
부모에서 자식컴포넌트에 넘길 때
이런식으로 자식이 받을 함수를 이름을 정한 곳에 넣어서 넘기는 것 -
componentDidMount()는 컴포넌트를 연동시켜준다고 생각
-
fetch()는 ()안에 있는 정보를 가져오는 것이다
then
then의 res가 있는 부분은 가져온 정보의 이름이다.
-
첫번째 then은 가져온 정보를 json화 한 것
-
두번째 then은 가져온 정보에 조건을 다는 것
위에서는 가져온 정보를 state를 다시 세팅 할 건데
이 state={}안에 있는 monsters:[] 안에 넣겠다는 뜻이다.
(JSX에서 html과 js를 혼합하여 쓸 때만 {} 쓰는 것) 이걸 헷갈림...
.toLowerCase() 는 문자열을 소문자로 변환시켜주는 것
map()
배열 내의 모든 요소에 각각 주어진 함수를 호출한 결과를 모아 새로운 배열 반환
이것도 이제야 좀 알거 같다ㅠㅜ
부모한테서 받은 monsters는 지금 안에 배열안에 많은 el이 있는데 배열 안에 각각의 index에 접근해
여기에 있는 id, name, email을 추출?하고 그 것들을 각각 key, id, name, email이라고 이름을 지어 Card란 컴포넌트에 전해줌
그럼 Card컴포넌트에서 
요로코롬 받을 수 있다~~~이 말입니다.
공부 팁
컴포넌트 같은 것이 헷갈릴 때는 아주 작은 것 부터
이번 monster로 예를들면
card => cardlist,searchbox => monsters
순으로 어떻게 props, state가 돌아는지 반대로 타고 타고 올라가보자 연어처럼!!!!
0개의 댓글
