React/React 2023

React 001-1 리액트란?

salalsksjwnn 2022. 12. 31. 00:53
728x90

오늘의 계획

섹션1-시작하기

리액트란 무엇인가?
https://reactjs.org/

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

넷플릭스 웹사이트를 보면 잘 알 수 있다. 모바일앱처럼 페이지를 돌아가는데 깜빡이며 기다릴 필요 없이 부드러운 진행을 보여준다. 전통적인 웹사이트에서는 새로 html페이지를 호출하고 로딩했지만 이렇게 하지 않아도 되는 것.

JS와 React

사용자들이 보는 것을 조작할 수 있다. js에서는 DOM을 통해 화면을 보이게 할 수 있다.
리액트는 자바스크립트의 라이브러리이기 때문에 DOM을 사용해 화면을 구현할 수 있다.

왜 JS 대신 React 가 필요한가?

  • 페이지를 보고 제어하는 것은 모두 js로 이루어진다. 작은 앱을 위해서 js로만 구현하려면 한 페이지에 아주 많은 양의 코드를 해야한다. 큰 앱을 만든다고 생각하면 더욱 복잡해질 것인데 이렇게 가독성이 좋지 않고 무언가를 찾기 힘게 될 것이다.
    • 리액트는 컴포넌트로 기능을 나누어 정리할 수 있어서 필요한 것을 골라 분리하여 정리 할 수 있다. 가독성이 좋아지고, 관리가 편리해 진다.
  • 명령형 접근방식으로 모든 요소를 순서대로 작성하고 정해주고 설명해야 한다.  모든 세부사항을 신경써야 할 것이다.
    반복되는 작업을 하느라 시간을 낭비하게 될 것이다
    • 리액트는 나누어 놓은 컴포넌트를 재사용 하면서 시간을 절약할 수 있다.

단일 페이지 애플리케이션(SPA)

페이지를 전환한 것 처럼 보이지만 새로고침해서 로드하는게 아닌 한 페이지 안에서 준비된 화면을 보여주는 것

728x90