# TIL-20210329

# react 비동기 처리

비동기 처리를 처음 다루는 방식으로 접근해본다.
dipatch같은 스토어 형태의 비동기 서버통신이 아닌 컴포넌트 단위의 비동기 처리를 구현한다.

# 적용 과정

비동기 데이터가 필요한 컴포넌트를 찾는다. 프로덕트 구조에 맞춰서 비동기 데이터가 필요한 컴포넌트를 정하고 해당 컴포넌트의 state로 설정한다.
비동기 처리의 트리거가 될 이벤트를 정의한다. 예를 들어 인터넷 쇼핑을 이용한다고 생각해보면,

검색어 입력
검색 시작
검색어에 해당되는 쇼핑 리스트 받아오기
화면에 보여주기 이 과정에서는 비동기처리는 검색 시작을 요청하는 경우이다.
보통은 검색 버튼이 클릭 되었을 때라고 생각 해볼 수 있다.

비동기 통신 구현

// App.js (class Component)
 //...
 this.state = {
   list:[]
 }
 //...
 handleSearch (queryString) {
   // 특정 비동기 처리를 완료하면
   this.state({list: '검색 결과 리스트'})
 }

위와 같은 과정을 통해 리스트 state를 변경하게 된다.
비동기처리는 web client의 내장 mothod인 fetch를 이용했다.

// 비동기 처리
const api = `https://데이터를 받아오려고 하는 api endpoint + 검색에 필요한 ${queryString}` 
fetch(api) // 비동기 서버 통신
 .then(res => res.json()) // json parsing
 .then(data => { // data는 우리가 받아오려는 아이템 품목 리스트
   this.state({list: data})
 })

핸들러를 트리거 이벤트에 콜백 설정

// App.js 
 // ...
 <Search handlerSearch={this.handlerSearch} />
 // ... 
// Search.js (class Component)
 // ...
 constructor(props) {
   super(props)
   this.state = {
     queryString:''
   }
   // ... method 바인딩
 }
 handlerInput(e) {
   this.setState({queryString:e.target.value})
 }
 render() {
   return (
 // ...
 <input type="text" onChange={this.handlerInput} value={this.state.queryString}/>
 <button onClick={() => { this.props.handlerSearch(this.state.queryString)}}>검색</button>
 // ...
 )}
 // ...

Search Component에서 핸들러를 실행 할 수 있도록 App Component에서 props로 내려준다.
buuton 엘리먼트의 onClick이벤트 콜백을 통해 받은 handlerSearch를 실행한다.

결과적으로 Search에서의 액션이 App의 상태를 변경할 수 있게 된다.
비동기 처리의 결과를 통해 this.setState를 실행하기 때문에, 통신이 성공적이라면 항상 새로운 list를 받게 된다.

← TIL-20210326 TIL-20210405 →