안경잡이개발자

728x90
반응형

  이번 시간에는 React의 LifeCycle의 개념에 대해서 이해한 뒤에 API 호출에 대해서 알아보도록 하겠습니다. React는 말 그대로 프론트 엔드(Front-End) 라이브러리입니다. 따라서 서버 개발자와 API를 이용해서 소통할 수 있어야 합니다. 하지만 React를 처음 공부하시는 분은 정확히 언제 API를 호출해서 데이터를 가져와 화면에 보여주어야 할 지 감이 안 잡힐 수 있어요. 이번 시간에는 그러한 내용에 대해서 다룰 거예요.


초기 구성 ※


  React 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정은 다음과 같습니다. 이러한 과정을 마운팅(Mounting)이라고 부릅니다.


  1) contructor()

  2) componentWillMount()

  3) render()

  4) componentDidMount()


  기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효과적이라는 것만 기억하시면 됩니다. SNS에 처음 로그인 했을 때 최근 타임라인 데이터를 API로부터 호출해서 화면에 보여주는 것이 그 예시입니다.


※ 데이터 변경 ※


  기본적으로 화면에 특정한 객체를 렌더링하기 위해서는 props 혹은 state를 사용해야 합니다. props와 state는 이러한 과정이 서로 다르지만 대략적으로 다음과 같은 순서로 수행된다는 것을 기억하시면 됩니다.


  1) shouldComponentUpdate()

  2) componentWillUpdate()

  3) render()

  4) componentDidUpdate()


  기본적으로 컴포넌트의 데이터와 화면(View)에 출력된 내용이 다를 때 shouldComponentUpdate() 함수가 동작합니다. 이 함수는 기본적으로 true 값을 반환합니다. 또한 화면에 출력되는 화면 구성을 변경하고자 할 때는 componentDidUpdate()를 많이 사용합니다. 실제로 데이터 변경과 관련한 함수들을 우리가 처리하게 되는 일은 많지 않습니다. 


※ 컴포넌트 해제 ※


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


※ API 호출 예제 ※


  이제 실제로 위와 같은 라이프 사이클의 개념을 활용하여 API를 호출하는 예제를 다루어 보도록 하겠습니다. API 호출을 연습하고자 할 때는 가짜(Fake) 온라인 REST API 사이트를 이용하시면 됩니다. 


  ▶ JSON Placeholder 사이트: https://jsonplaceholder.typicode.com/

  


  사이트에 접속해서 [Try it]을 클릭해 보시면 그 결과 응답(Response) JSON 데이터를 확인할 수 있습니다.



  이제 우리는 결과 JSON 데이터에서 title 정보만 받아서 화면에 출력해보도록 하겠습니다.


※ JavaScript 소스코드 ※


class ApiExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      data: ''

    }

  }

  

  callApi = () => {

    fetch("https://jsonplaceholder.typicode.com/todos/1")

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

      .then(json => {

        this.setState({

          data: json.title

        })

      })

  }

  

  componentDidMount() {

    this.callApi();

  }

  

  render() {

    return (

      <h3>{this.state.data ? this.state.data : '데이터 불러오는 중'}</h3>

    )

  }

  

}


ReactDOM.render(

  <ApiExample />, 

  document.getElementById('root')

);



728x90
반응형

'리액트(React)' 카테고리의 다른 글

React 이벤트 처리(Event Handling)  (2) 2019.01.04
React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25

Comment +2

  • 리액트꿈나무 2019.08.13 15:05

    componentWillUnmount 에서 redux에 저장되어있는 재사용성이 낮은 데이터를 지우나요 ?

  • 요즘은 함수형컴포넌트를 쓰다보니 라이프싸이클 api를 잘 사용하지 않게되네여 ㅎㅎ