React/Learn

리액트를 사용하는 이유, 장점

3.dev 2023. 1. 23. 14:29
반응형

1. SPA, CSR을 사용하는 동적 웹페이지

우리가 많이 사용하는 WebSite Naver, Instagram에는 서로 다른 차이점이 있다.

 

위 Gif를 보다보면 느낄 수 있는데 Naver의 경우 제공하는 다른 서비스를 선택하면 웹이 새로고침 되며 주소가 바뀌고
모든 내용들이 랜더링 된다.

하지만 Instagram의 경우 바뀔필요 없는 내용들은 그대로 두고, 새로고침도 할 필요가 없다.
변경되어야할 필요한 부분만 랜더링 된다는 것이다.

이 기술을 바로 SPA(Single Page Application), CSR(Client Side Rendering)라고 한다.

이것의 장점은 사용자가 웹에 최초 접근 시 페이지의 정보들을 한번에 로드하게 되고
페이지 내에서 이동 할 때 다시 로딩하거나 데이터를 사용하는 일이 줄어드는 장점이 있다.

2. Component를 이용한 재사용성 극대화 (Virtual DOM)

지금 누르고 있는 키보드를 한번 보자.
영문키, 숫자키, Function키 등등 여러 버튼들이 모여 하나의 키보드가 된다.

이처럼 여러 Component가 모여 하나의 완성된 WebSite를 만드는 것이다.

키보드를 예를 들어 Q를 입력하고 싶을땐 Q만 누르고 나머지는 그대로 두는 것이다.
WebSite도 Header, Nav, Footer는 그대로 두고 Article만 변경하고 싶을 때
Article만 경우에 따라 내용을 바꿔주면 이처럼 바뀔 수 있는 것인데
이것을 Component로 관리할 수 있다.

1번에서 설명했던것과 같이 기존의 DOM은 다른 서비스로 이용될 때 새로운 HTML을 Load하고 모든 DOM을 다시 가져온다.
React는 필요한 DOM만들 색출하고 필요한 부분만 Load하여 자원의 효율을 향상시켰다.
이것을 Virtual DOM 이라고도 한다.

import React,{useState} from 'react';
import {Header, Nav, Footer, Map, Division} from './components/main';

function App() {
  let article = null;
  const [mode, setMode] = useState("map");

  if(mode === "map"){
    article = <Map/>
  }else if(mode === "division"){
    article = <Division/>
    
  return (
    <div className="App">
      <Header/>
      <Nav/>
      {article}
      <Footer />
    </div>
  )
}

export default App;

이처럼 Header, Nav, Footer를 Component로 가져와 항상 표시해둔 상태에서
현재 모드가 "map"인지 "division"인지 판단하여 다른 Component를 표시해주는 것이다.
(useState에 대해선 useState에 관한 글을 확인하면 이해할 수 있다)

그럼 Header, Nav, Footer, Map, Division Components는 어떻게 만드는가?


Footer.js라는 File을 만들어서 export를 해주고 App.js에서 import를 해주면 된다.
Footer에서 return해준 값이 곧 내용이 되는 Elements가 된다.

etc.

그 외에도 사용자가 많아 모르는 부분을 찾기 쉽다.
Html, Css, Javascript를 기반하기 때문에 배우기도, 실제 사용해보기도 어렵지 않다.

반응형