React(리액트)

in Web

본 글은 네이버 부스트캠프 과정에서 학습한 내용의 게시글입니다.

참고 : React와 React-Native의 차이

정의

React?

페이스북에서 많든 프론트엔드 JavaScript 라이브러리

React-Native?

React 방식으로 네이티브 앱을 개발할 수 이쓴 페이스북의 오픈 소스 프레임워크

동작

React?

React는 Dom이 생성되고 난 뒤 Virtual Dom을 이용하여 변화된 곳을 캐치하여 변화된 Dom으로 변경

React-Native?

React-Navtive 코드를 실행하게 되면 Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근할 수 있게 함

image

차이점

1. 화면 출력

React는 ReactDom을 사용하지만 React Native는 AppRegistry를 사용

2. 문법

두 개 다 JSX 문법을 사용하지만 React는 HTML 문법을 사용하지만 React Native는 HTML 문법을 사용하지 않음

3. CSS 지원

React-Navtive는 기존의 css를 지원하지 않고 flexbox를 이용한 레이아웃 제작을 제공함

Reference

React-Native 와 React의 차이

1. React란

1.1. 정의

  • 웹 프레임워크로, 자바스크립트의 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨
  • facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있음
  • 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있음
  • 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리

1.2. 필요성

  • 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들수 있음

1.3. 특징

1.3.1. Data Flow

  • React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐
    • Angular.js와 같은 양방향 데이터 바인딩은 애플리케이션의 규모가 커질 수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있음
  • 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 하기 위함

1.3.2. Component 기반 구조

  • React는 UI(View)를 여러 컴포넌트를 쪼개서 만듦
    • 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성함
  • 컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 상대적으로 수월함
  • 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높음
  • 결과적으로 코드를 반복해서 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있음
    • 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해짐

1.3.3. Virtual DOM

  • React는 이 Dom Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있음
    • Virtual DOM : 가상의 Document Object Model
  • 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전 후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 함

1.3.4. Props and State

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

1.3.5. JSX

  • JavaScript를 확장한 문법
  • React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아 들임
  • React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리함
    • 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것임
  • React에서 JSX 사용이 필수는 아니지만, 대부분은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각함
    • 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줌

Reference

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