Stateairline-client 과제

[React] 데이터 흐름의 이해와 비동기 요청 처리

이틀에 걸쳐 데이터의 흐름, state상태 끌어올리기와 useEffect AJAX요청에 대해 공부했다.

 

리액트의 컴포넌트는 1가지의 일만 하고 단방향의 데이터 흐름을 가진다.

그래서 데이터를 어디에 담아줘야할지 정해줘야한다.(데이터정의)

 

부모가 데이터를 가지고 자식에게 props(읽기적용)로 내려준다(인자 혹은 속성처럼 내려줌)

자식은 데이터를 내려받지만 데이터가 어디에서 왔는지는 알지못한다.

 

[상태끌어올리기]

데이터의 흐름이 top-down 방식이지만, 자식컴포가 부모컴포의 상태를 바꿔야하는 경우에는

(예. 자식컴포에 전송버튼이 있어 클릭시 부모의 데이터 목록이 업데이트 되어야 하는경우)

부모컴포내에 상태를 변경하는 함수를 두고 자식컴포에 이 상태 변경함수를 props로 전달해서 해결한다.

콜백함수의 사용법과 유사하게 사용가능하다.

 

내가 정리한 상끌은 (자식 컴포에 버튼이 있다는 가정하에)

1. 부모컴포에 상태를 변경하는 함수가 있고  <자식컴포 /> 를 리턴한다.

2. 자식컴포에 <자식컴포 적당한함수명 ={부모의 상태변경함수} /> 로 함수를 전달한다.

3.  자식컴포의 인자로 적당한함수명을 인자로 받는다. ex. function 자식컴포({적당한함수명})

4. 자식의 버튼에 이벤트 핸들러를 달고 핸들 함수를 만든다.

5. 핸들 함수내에 내려받은 적당한함수명(); 을 넣어준다. 

 

[useEffect]

리액트의 컴포넌트는 순수함수를 가진다. 하지만 ajax요청이나 LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할수 있는데 리액트의 입장에서는 전부 Side Effect로 받는다. Side Effect를 사용하기 위한 Hook이 useEffect이다. 

useEffect는 예를 들어 비동기 함수인 패치를 사용할때 바로 console.log(패치의 값)을 할 경우 패치가 다 진행되지 않은

상황에서 콘솔요청이 들어오기 때문에 ㅇㅇㅇ of defined 에러를 띄우는데, useEffect를 사용할경우 '리액트가 알아서 기다려서 값 받을테니 신경쓰지마' 라는 느낌으로 일을 처리해준다고 한다.

 

보통,

 useEffect( () =>{
    //side Effect를 실행하는작업
    })
    
  },[종속성 배열])

 이런식으로 작성하는데 종속성 배열이 있다면 해당 값이 변경될때만 실행하고, 빈배열이라면 1번만 실행하고,

아예 비워둔다면 최초에만 실행한다.

 

[AJAX요청] - Asynchronous JavaScript And XML

 

fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔고,
promise기반으로 만들어졌다. 내장 라이브러리라는 장점으로 인해 편리하게 사용할수있다.

resolve,reject를 반환하여 에러 처리에도 용이하다.

 

fetch를 사용하여 URL의 데이터를 처리했는데 

간단하게 

export function getFlight(filterBy = {}) {
  
  let query = ''
 
  if(filterBy.departure){ // 따로 받아와야하는 데이터가 있어 조건문으로 걸렀다 
    query = query +'departure='+ filterBy.departure +"&";
  }
  if(filterBy.destination){
    query = query + 'destination='+filterBy.destination;
  }//query parameter(/flight?departure=ICN&destination=CJU)가 유저의
  //요청에따라 유동적으로 변해야 해서 endpoint에 백틱을 사용했다.
  
  let endPoint =  
  `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${query}`

  return fetch(endPoint) //URL을 받아 json()해줌.
  .then(res => res.json());

처리했다.

 

fetch는 promise와 async await엮어서 다시 정리해야겠다.

 

오늘은 여기까지