220408 웹TIL) state,리액트 생명주기,axios,async~await

 

 

1. state 리마인드 

다시 한번 주의하자 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 

즉 어떤 동작이 업데이트가 되면(+ 버튼을 누른다거나, - 버튼을 누른다거나.. 하면) render() 함수가 다시 실행되어 그 결과를 화면에 출력해주는 것이다. 

 

 

 

 

2. 리액트 생명주기 

https://velog.io/@crackco/React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0Lifecycle

 

 

큼직큼직한것만 보자면 constructor() 함수 실행 > render() 함수 실행 > componentDidMount() 함수 실행 

1.Add또는 Minus 버튼을 누르면 setState() 함수가 실행되고 

2. 버튼이 눌렸으므로 화면의 변화가 생긴다. render() 함수가 다시 실행된다. 

3. componentDidUpdate() 함수가 실행된다. 

 

참고 ) 리액트의 컴포넌트는 지정되어이는 생명주기 함수가 존재하며 이를 재정의하여 원하는 시점에 동작을 수행할 수 있다.

단, 생명주기 함수는 리액트 엔진에서 자동으로 호출하는 것으로 개발자가 마음대로 호출할 수 있다. 

우리가 눈여겨볼 함수는 shouldComponentUpdate(), componetnDidMount()이다. 이 함수들은 리액트를 사용하여 개발할 때 성능과 관련이 있으므로 적당한 때에 맞춰 사용할 줄 알면 좋다. 

 

shouldComponentUpdate() 함수는 props가 변경되거나 state 값이 변경되면 화면을 다시 그려야 하는지 판단하는 함수이다. 웹 페이지를 다시 렌더링 하는 것은 성능에 영향을 끼치므로 최적화가 필요할 때 사용된다.

기본값은 true이며 false가 리턴되면 해당 컴포넌트는 다시 렌더링하지 않는다. (return문에 작성) 

 

 

componentDidMount() 함수는 컴포넌트가 첫 렌더링을 마치고 호출되는 함수이다. 

= 첫 렌더링을 마치고 화면에 출력되어야 할 부분을 나타낸다 

일반적으로 AJAX 같은 화면이 ㄱ려지고 나서 수행할 동작을 작성한다. 

 

 

리액트에서는 Mount로 생명주기를 분류한다. 

Unmount는 컴포넌트가 죽을때다. 언마운트로 분류한 생명주기에서 꼭 알아야 할 함수는 componentWillUnMount()이다. 컴포넌트가 이 화면에서 떠나게 만드는 코드를 작성하지 않으면 이 함수는 실행되지 않는다. 

 

 

3. axios 

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

쉽게 말해서 백엔드랑 프론트엔드 통신을 쉽게 하기 위해 Ajax와 더불어 사용 

 

 

axios는 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 

Promise(ES6) API 사용, 요청과 응답 데이터의 변형, HTTP 요청 취소, HTTP 요청과 응답을 JSON 형태로 자동 변경 

 

npm으로 axios를 설치해주고 리액트에서 사용하려면

import axios from 'axios';

를 해주어야 한다. 

 

HTTP Method는 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단인데 

이 메서드 중에서 Axios와 통신하는데 많이 사용하는 메서드는 

1) GET 

axios.get(url,[,config])

GET 뒤에 쿼리스트링이 붇는데 GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도 

주소에 있는 쿼리스트링(?)을 활용해서 정보를 전달하는 것. GET메서드는 값이나 상태 등을 바꿀 수 없다. 

 

POST 

사용자가 생성한 파일을 서버에다가 업로드 할 때 사용 

POST 메서드를 사용하면 주소창에 쿼리스트링이 남지 않기 때문에 GET보다 안전하다(POST가 GET보다 안전하다고만 알았지, 쿼리스트링의 여부 때문에 더 안전한건지는 처음 알게 되었다) 

그 밖에 DELETE, PUT이 있다. 

 

참고) 프론트엔드개발자가 백엔드 없이 Axios와 서버 통신을 하고 싶다면? 

백엔드 개발자 없이도 Mock서버를 이용하거나 다양한 온라인 Fake 서버를 활용한다. 

 

4. async~await

  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  }

  componentDidMount() {
    // 영화 데이터 로딩 
    //axios.get('https://yts-proxy.now.sh/list_movies.json');
    this.getMovies();
  }

componentDidMount() 함수가 실행되면 this.getMovies()가 실행된다. 이 때 자바스크립트에게 getMovies() 함수는 시간이 필요해 라고 말해야만 axios.get()이 반환한 데이터를 제대로 잡을 수 있다. 그렇게 하려면 async~await가 필요하다 

 

async라는 키워드는 자바스크립트에게 getMovies() 함수가 비동기라고 말해준다. 비동기라서 기다려야 해! 라고 안내를 준다.

await는 자바스크립트에게 getMovies() 함수 내부의 axios.get()의 실행 완료를 기다렸다가 끝나면 계속 진행해 줘 라고 말한 것 

 

여기서 우리가 집중해야 할 내용은 API에서 데이터를 받아오는 axios.get()을 실행하려면 시간이 필요한데, 그 사실을 자바스크립트에게 알려줘야 원하는 데이터를 잡을 수 있으므로 async,await를 사용했다. 

 

(정리) 

1. 리액트 앱이 실행되면 최초로 render() 함수가 실행된다

2. 최초의 state에 담긴 키 값들이 있고, 그러다보니 최초의 실행 화면에는 Loading이 표시된다.

3. 이어서 App 컴포넌트가 마운트되면 componentDidMount() 함수가 실행되면서 getMovies() 함수가 실행된다

4. 그런데 getMovies() 함수에는 시간이 오래 걸리는 axios.get()이 포함되어 있다. 그래서 getMovies() 함수에 async를, axios.get()에 await를 붙였다. async와 await는 짝궁이다. 둘은 동시에 사용해야 한다

 

 

 

 

참고 

https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0