React Native 에서 React 까지

WANT_seok
WANT_seok
Sep 4, 2018 · 3 min read

사용자들에게 더 나은 편의를 제공하고자 관리자 페이지를 만들기로 하였다.

관리자 페이지는 React라는 UI 라이브러리를 사용하여 만들었다. 한 동안 React Native의 세상에 빠져있다보니 오랜만에 다가온 HTML 태그들이 굉장히 낯설게 다가왔다.

이틀 동안 React를 다시 차근차근 정리해가며 관리자 페이지에서 E-mail 관련된 부분을 만들었다.

REACT

  • Just Javascript (No framework to learn)
  • 컴포넌트별로 나눠서 작업 가능
  • 단방향 데이터플로우 (Data changes UI)
  • React is not framework React is UI Library

Web Pack (Module Bundler): 자바스크립트를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 한다.

리액트 : Jsx (리액트로 작성하는 html)

리액트 : UI(User Interface) 라이브러리

리액트 DOM : 리액트를 웹사이트에 출력하는 걸 도와주는 모델

Render : componentWillMount -> render -> componentDidMount

Update : componentWillReceiveProps -> shouldComponentUpdate(이전 것과 현재 것이 같으면 update-true를 return , state가 바뀔 때는 여기서 부터) -> componentWillUpdate -> render -> componentDidUpdate

AJAX(Asynchronous Javascript and XML) : 웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지를 새로고침해서 내용을 새롭게 변경해야 했다. 그러나 AJAX를 도입하면서 모든 것이 바뀌었다. AJAX는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다.

-> 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

이때 사용하는 것이 JSON(JavaScript Object Notation) 이다

JSON : 네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식

fetch .then .then .then …… -> Call Back Hell! -> async, await로 해결!

동기 : 이전 라인이 끝나서 결과가 얻어지면 그 다음 라인이 실행된다. 직관적

비동기: 이전 라인의 작업이 끝나기를 기다리지 않는다. 자원을 효율적으로 사용할 수 있다. 작업을 수행하도록 지시만하고 다음으로 넘어간다. 끝나기를 기다리는 것, 성공적으로 수행하는 것이 아니라 일단 끝나기를 기다리는 것

asyncronous : 이전 라인의 작업이 끝나기를 기다리는 것이 아닐때

    WANT_seok

    Written by

    WANT_seok

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade