개발 목표

1. 컴포넌트 생성하기

2. jsonplaceholder 사이트를 활용하여, id카드에 생성에 필요한 가상의 id number, 이름, email 정보 가져오기.

3. 부모 컴포넌트의 data를 자식 컴포넌트에게 전달하기.

4. user의 이름 검색시, 해당 id카드가 나올 수 있도록 하기

1. 컴포넌트 생성하기.

• 총 3개의 컴포넌트를 생성했다. (Card, Cardlist, SearchBox)
  
• Monsters.js 파일을 main으로 하고, user 데이터를 모두 받아올 계획이었다.
• Card 컴포넌트는 한개의 카드가 어떻게 구성되는지 보여주려 하였고, Cardlist 컴포넌트는 user정보가 담긴 Card를 모두 담은 list 이다.

2. user의 정보 가져오기

• jsonplaceholder는 json data를 처리하는 연습을 할 수 있도록 data를 주는 사이트이다.

  https://jsonplaceholder.typicode.com

• fetch 메서드를 활용하여, user data를 가져왔다.

  

코드 살펴보기

1. state의 초기값을 설정하기 위해 사용하는 constructor()와 super()는 위와 같이 생략 가능하다.

// 생략 전
constructor(props) {
    	super(props);
        this.state = { 
        monsters: [] 
        };
    };

//생략 후
state ={
	monsters: [],
    }

2. jsonplaceholder 의 데이터를 담기 위해, monsters 라는 state를 만들고, 빈 배열을 선언해준다.

3. fetch함수로 url의 data를 가져오고, 그 다음(.then) res라는 인자에 담아 json()으로 읽을 수 있도록 변환하여 준다. 그 다음(.then) json으로 변환된 data를 monsters에 setState 해준다.

위의 코드를 작성하며 공부한 것

• 리액트의 lifecycle의 흐름을 더 정확하게 알게 되었다.

데이터를 불러오는 순간은 componentDidMount() 되는 순간이다. componentDidMount는 리액트의 lifecycle 상 한번만 실행하는데, 많은 개발자들의 개발 convention상 이 시점에 data 로딩을 많이 한다고 한다.

먼저 constructor() 가 실행되면서, state 값들이 초기화가 된다. 이 다음 render()가 되면서 화면에 html을 그려준다. 이후 componentDidMount()가 실행되는데, 위의 코드를 보면 이 순간 json형식의 data를 monsters 라는 빈 배열에 setState를 해준다.

setState가 되는 순간, state값이 변했으므로, 변한 값을 가지고 다시 render()가 실행되게 된다.

• console.log를 활용하여 살펴보면, user render가 되는 시점에는 데이터가 없지만, componentDidMount가 되면서 setState가 된다. 이후 다시 user render가 되면서 user data를 가지고 온것을 볼 수 있다.

3. user 데이터 전달하기.

• Monsters.js
  
• CardList.js
  
• Card.js
  

코드 살펴보기

• filter 기능을 구현하기 위해 result 변수에 data를 담았지만, 원리는 똑같다.

1. monsters 라는 속성(props)명을 선언하고, setState된 data를 저장했다.

2. CardList 컴포넌트에서 Card의 필요한 속성(props)을 정의해주고, monsters로 받아온 data를 속성에 맞게 나누어 준다.
   ex) monsters.id : monsters라는 이름으로 받아온 data중 key값이 id 인것만 추출한다.

3. Card 컴포넌트의 부모는 CardList이므로, CardList에서 props가 id, name, email로 선언 된 data들을 자리에 맞게 가져온다. (ex> this.props.name : 부모에서 name으로 props가 지정된 데이터를 불러와줘)