[React]LifeCycle과 API호출

LifeCycle은 해당 라이브러리가 동작하는 과정 그자체를 의미한다.

그렇기 때문에 React라이브러리를 사용한다면 React라이브러리의 LifeCycle에 본인의 코딩스타일을 맞춰야한다.

만약 React를 이용해서 고객관리시스템을 만든다 가정했을때 고객 추가 버튼을 누르고 고객에대한 정보를 서버로부터 받아와서 화면에 출력하고자 한다면 고객에 대한 정보를 받아오는 그러한 통신자체를 api를 이용하는 방식으로 사용을 하게된다. 따라서 서버 개발자와 API를 이용해서 소통할 수 있어야 한다.

 

---

 

React초기 구성

React를 이용할때 React컴포넌트 객체를 만드는데 이게 실제 화면상에 삽입이 되기 전까지의 과정을 마운팅(Mounting)이라 부른다.

1) contructor() : 컴포넌트에 대한 초기화 해주기

2) componentWillMount() : 그리고 이 함수가 불러와진다.

3) render() : 렌더링을 통해서 컴포넌트를 화면에 그리고

4) componentDidMount() : 처리가 끝난뒤에 불러와 지는 함수이다. 제일 많이 건드릴 함수

기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효과적이다.

ex) 학생정보 관리 서비스라 했을때 전체 웹사이트를 구상한 뒤에 학생목록좀 불러와달라는 API를 호출하면(서버로 보내면) 서버에서 학생정보가 날라오고 화면에 보여주게 된다.

ex2) sns에 처음 로그인 했을 때 최근 타임라인 데이터를 API로 호출해서 화면에 보여주는 것.

---

 

데이터 변경

기본적으로 화면에 특정한 객체를 렌더링 하기 위해서는 props혹은 state를 사용해야한다. 

대략적으로 다음과 같은 순서로 수행이 된다.

1) shouldComponentUpdate() : 컴포넌트 업데이트를 수행할지 여부에대해 처리

2) componentWillUpdate() 

3) render() : 실제로 여기에서 다시 화면이 구성

4) componentDidUpdate() : 컴포넌트가 완전히 업데이트 되었다.

데이터가 변경된 이후에 화면에 출력되는 화면 구성을 변경하고자 할때는 componentDidUpdate()를 많이 사용한다. 

---

 

컴포넌트 해제

컴포넌트가 마운팅 해제 될때 수행되는 함수는 componentWillUnmount()함수이다. 이걸 이용해서 컴포넌트 동작을 위해 사용되었던 메소드들의 리소스를 제거해주게 된다. 어플리케이션의 성능향상.

 

---

API 호출 예제 

가짜 온라인 REST API 사이트 이용하기 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

내리다보면 try 해볼 수 있다.

fetch함수를 이용해서 해당 API서버로 데이터를 호출할 수 있다.

이 사이트는 이러한 과정을 바로 테스트 할 수 있게 해준다. 

 

가상으로 API서버('https://jsonplaceholder.typicode.com/todos/1')에 접속을 해서 건너온 데이터를 reponse라 하는데 이 reponse를 json형태로 데이터를 받아 콘솔에 출력하도록 한것이고 출력결과가 저렇게 나온걸 예시로 보여준것.

 

json이란 서버와 클라이언트가 데이터를 주고 받을때 사용할 수 있는 데이터 형식이다.

 

React에 적용해보기

class ApiExample extends React.Component{
  //클래스형 컴포넌트는 props를 내부적으로 가지고 있기때문에
  constructor(props){//constructor정의해줄때는 반드시 props를 매개변수로 받아서
    super(props);//super를 이용해서 props를 초기화할 수 있도록 만들기
    this.state = {//data에 빈값 넣고 data를 호출된 API값으로 바꾸기
      data : ''
    }
  }
  //API호출해주는 함수
  callApi = () => { //함수 호출하면 
    fetch("https://jsonplaceholder.typicode.com/todos/1")//특정한 서버로 접근을해서 
      .then(res => res.json()) //데이터를 받아온 뒤에 
      .then(json => {
        this.setState({
          data : json.title //title값으로 현재 state의 data변수의 값을 바꿔주기
      });
    });
  }

  componentDidMount(){//특정한 API호출할때 이함수에서 불러옴
    this.callApi();//이함수는 클래스 내부에서 정의되었기때문에 this키워드 붙여주기
  }
  
  render(){//클래스형 컴포넌트는 반드시 render()함수를 가지고있다.
    //componentDidMount()함수보다 render()함수가 먼저 호출된다.
    return (
    //data가 현재 비어있다가API를 통해서 데이터를 불러왔을떄 데이터가 갱신되기 때문에 
    //현재 데이터가 비어있을때와 비지않을때를 각각 render()함수를 통해서 명시해주기
      <h3>
        {this.state.data? this.state.data : '데이터를 불러오는 중입니다.'}
      </h3>
    );
  }
}

ReactDOM.render(<ApiExample/>,document.getElementById('root'));

그럼 처음에 데이터를 불러오는 중입니다 후에 

이러한 결과가 뜬다.

 

이런식으로 React에서는 API를 호출할 수 있고 render()함수가 수행된 이후에 componentDidMount() 함수가 불러와진다. (React의 LifeCycle)