JS - React / React Native / Electron

IRISH·2023년 10월 25일
0

JS

목록 보기
9/80
post-thumbnail

React

  • 유형: JavaScript 라이브러리
  • 설명: React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, React.js 또는 ReactJS로도 알려져 있습니다. Facebook과 개발자 커뮤니티에 의해 유지되며, 재사용 가능한 UI 컴포넌트를 만드는 데 사용됩니다. React는 이러한 컴포넌트를 조합하여 복잡한 사용자 인터페이스를 개발할 수 있도록 설계되었습니다. React는 MVC(Modal-View-Controller) 아키텍처의 "뷰" 부분에 중점을 두며 가상 DOM(Document Object Model) 기술을 사용하여 전체 페이지 새로 고침의 필요성을 줄이므로 성능을 개선합니다.

왜 React를 사용할까? - React의 필요성

  • react를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있음
  • 그러나, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용

React의 특징

React의 특징은 크게 다음과 같이 구분됨.
1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX

  1. Data Flow
  • React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터
  • Augular.js는 양방향 데이터 바인딩
    • 복잡한 환경에서는 양방향이 불리
  1. Component 기반 구조
  • Component : 독립적인 단위의 소프트웨어 모듈
  • React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듦
    • 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성
    • 컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 용이
    • 재사용성 높음
    • 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점 존재

아래는 Header, Footer같은 구조등을 컴포넌트로 만들고, 이를 조합해서 root component를 만드는 방식

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}
  1. Virtual DOM
  • DOM : 문서 객체 모델(Document Object Model)
  • DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리
  • React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있음
  • Virtual DOM : 가상의 Document Object Model
    • 이벤트가 발생할 때마다 Virtual DOM 생성
      • 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교 => 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선
  1. Props and State
  • Props

    • 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터
      • 쉽게 읽기 전용 데이터라고 생각하면 됨
      • 자식 컴포넌트에서 전달받은 props는 변경이 불가능
      • props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있음
  • State

    • State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
    • state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용
    • 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적
  1. JSX
const element = <h1>Hello, world!</h1>;
  • 위와 같은 변수 선언도 JSX문법

  • JSX

    • Javascript를 확장한 문법입니다.

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

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리함.

이후, 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것!!!!

React Native

  • 유형: 모바일 앱 개발 프레임워크
  • 설명: React Native은 Facebook에서 만든 오픈 소스 프레임워크로, React를 사용하여 모바일 애플리케이션을 구축하는 도구입니다. 개발자는 JavaScript와 React 원칙을 사용하여 모바일 애플리케이션을 작성한 다음 Android 및 iOS 플랫폼을 위한 네이티브 코드로 컴파일할 수 있습니다. React Native는 플랫폼 간 일부 핵심 코드를 공유하면서 필요한 경우 플랫폼별 코드를 작성할 수 있도록 합니다. 이러한 접근 방식은 컴포넌트 및 로직 재사용을 통해 Android 및 iOS 모두에 걸쳐 모바일 앱 개발을 가속화합니다.

Electron

  • 유형: 데스크톱 애플리케이션 개발 프레임워크
  • 설명: Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 여러 플랫폼용 데스크톱 애플리케이션을 만들 수 있게 합니다. Electron은 웹 애플리케이션을 네이티브 쉘 내부에 포장하고 네이티브 API 및 파일 시스템 액세스를 제공하여 동작합니다. Visual Studio Code, Slack, WhatsApp Desktop과 같은 인기 있는 애플리케이션은 모두 Electron을 사용하여 개발되었습니다.

요약

  • React는 주로 웹 애플리케이션용 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
  • React Native은 React의 컴포넌트 기반 접근 방식을 사용하여 Android 및 iOS용 모바일 앱을 개발하는 프레임워크입니다.
  • Electron은 웹 기술을 사용하여 여러 운영 체제용 데스크톱 애플리케이션을 만들기 위한 프레임워크입니다.

참고

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 Native와 Electron에 대해서는 잘 몰랐던 것 같다. 현재, 백엔드 개발자로써 커리어를 보내고 있는데, 최근에 프론트엔드 작업도 하면서 프론트엔드에 대해 공부를 해야겠다는 필요성을 느꼈다.
  • 우선, 웹을 기반으로 개발을 진행하고 있기 때문에 React를 빨리 공부하고 Electron을 활용해서 개발 공부를 해봐야겠다.
profile
#Software Engineer #IRISH

0개의 댓글