[React] React란?

2023. 7. 20. 10:31ㆍ기술 창고/React

728x90
반응형
SMALL

React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다.
js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다.

 

React 특징

1. 데이터 흐름

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.

Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다.

 

 

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다.

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

위와 같이 Header, Footer같은 구조등을 컴포넌트로 만들고, 이를 조합해서 root component를 만드는 방식입니다.

 

 

3. Virtual DOM

DOM은 Document Object Model의 약자입니다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.

Virtual DOM은 가상의 Document Object Model을 말합니다

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

 

 

4. Props and State

  • Props
    Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
    쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
  • State
    State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

 

 

5. JSX

JSX란 Javascript를 확장한 문법입니다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

 

const element = <h1>Hello, world!</h1>;

위와 같은 변수 선언도 JSX문법입니다.

 

React 장점

(1) React의 장점 중 하나는 요소들을 반복하기 쉽다는 점입니다.
대표적으로 에어비엔비 페이지에 나오는 타일 항목들처럼, 이 섹션들은 각각 다른 정보들을 가지고 있지만  별점 매기기라던지 등록된 태그 같은 부분들은 다른 항목들과 비슷하게 운영된다고 볼 수 있습니다.
만약 렌더링해야 될 것들이 많이 있다면 단일 구성 요소를 만들어 다양한 데이터를 사용해 사용자 지정해서 사용하면 됩니다.

 

React를 사용하지 않는 이전의 웹 구조 만드는 방식을 보면 HTML 코드를 많이 사용할 수 밖에 없었습니다.
Bootstrap을 사용한다고 하더라도 많은 Bootstrap 의 코드를 넣어야 되기 때문에 체계화하기 어렵고 파악하고 이해하기도 쉽지만은 않습니다.

 

 

기존 방식 html 구조

<body>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</body>

 

 

React

<body>
   <MyHeader />
   <Content />
   <MyFooter />
</body>

React를 사용하면 위와 같은 형식으로 필요한 코드들을 따로 분리시킨 뒤, 구현되어야할 페이지의 HTML에 간편하게 끼워넣을 수 있습니다.
마치 header와 footer를 import해서 반복적으로 사용하는 방식처럼 말이죠.
따라서 재사용도 가능하게 할 수 있고, 코드도 깔끔하게 정리되기 때문에 파악하기도 수월합니다.

 

 

(2) React는 스스로 업데이트하고 독립적으로 서버와 통신할 수 있습니다.

초기 페이스북 / 현재 페이스북

예를 들어, 초기의 페이스북을 보면 친구를 추가한다던지 새로운 게시글을 추가한다던지 했을 때 반드시 새로고침을 눌러주어야했습니다.
하지만 지금은 게시글이 추가될 때 마다 스크롤을 내려 가장 최하단까지 내려가게 되면 새로운 게시글이 업로드되어 보여지게 됩니다.
이렇듯 새로고침할 필요없이 독립적으로 스스로 업데이트하고 서버와 통신이 가능합니다.

 

 

(3) 변경 사항이나 업데이트 된 내용들을 아주 효율적으로 다시 렌더링 할 수 있다는 점입니다.

변화가 발생할 때마다 새 데이터가 들어오거나 사용자가 무엇인가를 변경할 때 렌더링하기 원하는 DOM 트리의 새 버전과 기존의 DOM 트리를 비교합니다.
비교했을 때 새로운 트리의 내용으로 렌더링을 수행합니다.
이는 마치 JPA의 더티 체킹과 유사하다고 볼 수 있습니다.

위의 이미지를 보면 input과 p 태그에 간단한 변경 사항만 발생하였고 이것을 바로 렌더링하여 반영시킵니다.

 

 

 

그래서 위와 같은 특징과 장점을 보았을 때 왜 React 가 동적인 UI 를 만들 때 가장 인기있는지 알 수 있습니다.

그만큼 프론트엔드 개발자라고 한다면 React 대부분 필수라고 볼 수 있습니다.

 

 

[추가로 도움받은 글]

https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

 

[React] React.js란? (간단 정리)

오늘은 React란 무엇인지, 정의와 특징에 대해 간단히 정리하려고 합니다.웹 페이지를 개발하면서 이용했었는데, 정확하게 무엇인지, 특징과 장점이 무엇인지 잘 모르고 사용해왔던 것 같아 정리

velog.io

 

728x90
반응형
LIST

'기술 창고 > React' 카테고리의 다른 글

[React] Import, Export 사용법  (0) 2023.07.21
[React] React Component (컴포넌트)  (0) 2023.07.20
[React] JSX 속성과 React CSS 스타일링  (0) 2023.07.20
[React] JSX  (0) 2023.07.20
[React] S3 파일 불러오기  (0) 2023.07.11

관련글

티스토리툴바