React - map() 활용

 

 

아래 나열된 순서대로 진행해 주세요.

1.  API 주소를 호출하여 데이터 로딩을 처리해주세요!

    - componentDidMount()

    - fetch

    - setState (monsters에 저장)

 

  2. SearchBox 컴포넌트에 정의한 handleChange 메서드를 넘겨주고, 

     호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput으로 setState.

 

 

 

App.js

 

1. App.js에서 API 호출

호출할 API 주소

: https://jsonplaceholder.typicode.com/users

위 주소를 호출하여 데이터 로딩을 처리하기

리액트에서 데이터 로딩을 할때, 필요한 메서드가 존재한다.

그것은 바로 fetch()라는 메서드이다.

 

그렇다면 fetch()의 적절한 위치는 어디인가?

바로, componentDidMount()에 위치해야 한다.

이 componentDidMount()는 처음 render()가 되면, 화면에 요소들이 그려지고 나서 실행되는 컴포넌트의 Lifecycle이다.

 

소스 분석

1.

state = {

    monsters: [], // API에서 추출한 데이터를 담음 배열

    userInput: "", // SearBox에 props로 넘겨줄 값

  };

 

2.

fetch("https://jsonplaceholder.typicode.com/users")

      .then((res) => res.json())

      .then((res) => this.setState({ monsters: res }));

1. fetch()를 통해서 API에 접근한다.

2. .then() -> "그러고 나서"라는 의미라고 보면 된다.

3. res는 API에서 가져온 데이터이며, 이 데이터는 json형식이다

4. res.json()은 이 json형식의 데이터를 자바스크립트로 변경해주는 것을 뜻한다.

5. this.setState({ monsters: res })로   state에 만든 mosters라는 키에 키값으로 자바스크립트화 시킨 데이터를 넣는다.

 

3. 

  handleChange = (event) => {

    this.setState({ userInput: event.target.value }, () =>

      console.log(this.state.userInput)

    );

  };

: SearchBox에 props로 넘겨줄 handleChange 메서드

 

4. 

const searchName = this.state.monsters.filter((monster) =>

monster.name.toLowerCase().includes(this.state.userInput.toLowerCase())

    );

:

filter()의 기능은?

: 해당 데이터의 모든 항목 각각 하나씩 가져와서, 조건에 맞을 경우 조건에 맞는 항목만 새 배열을 반환한다.

- 소문자로 바꾼 monster.name 값과 userInput값을 비교 후, true 일 때 해당하는 항목이 담긴 새 배열을 searchName에 담음

 

5. 

return (

      <div className="App">

        <h1><h1> 컴포넌트 재사용 연습! </h1></h1>

         {/* <SearchBox handleChange=정의 한메 소드 /> */}

         <SearchBox handleChange={this.handleChange} />

        {/* <CardList monsters=필터링된 몬스터 리스트 /> */}

         <CardList monsters={searchName} />

      </div>

- SearchBox 컴포넌트에 props로 handleChange이라는 이름으로 this.handleChange를보낸다.

- CardList 컴포넌트에 props로 monsters라는 이름으로 filter 메서드가 반환하는 값이 담겨 있는 searchName을 보낸다.

 

SearchBox.js

: input 태그는 검색창이며, 검색창에 onChange를 할 때마다, props로 받은 handleChange함수가 실행됨

그러면 해당 검색 값들이  App 컴포넌트(부모)의 userInput값이 업데이트된다.

이유는?

: 부모 컴포넌트에 있는 state값이 자식 컴포넌트로 보내졌을 때, 둘은 연결되어 있는 관계라고 보면 된다.

 

CardList.js

Card.js

검색했을 때, 화면에 뿌려주는 컴포넌트는 바로 CardList 컴포넌트와 Card 컴포넌트이다.

CardList 컴포넌트에서 props값으로 id, name, email라는 이름으로 해당하는 값을 보내주고,

Card 컴포넌트에서 props값을 받아서 해당하는 곳에 세팅해준다.

 

정리하자면,

1. 검색을 했을 때, filter()를 이용해서, 조건에 맞는 항목을 searName에 담고, 그것을 CardList에 보내고

2. CardList는 또 그 안에서 Card에 데이터를 보내서 화면에 뿌린다.

 

그렇기 때문에, 검색창에서 검색을 하면 해당하는 값이 화면에 보이는 것이다.