[React] React X-파일

" A JavaScript library for building user interfaces"
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
- 리액트 공식 사이트

React 란?

• React 란 Facebook (META) 에서 만든 자바스크립트 라이브러리이다.
• SPA 나 모바일 애플리케이션 개발의 토대로 사용될 수 있다.
• 현재 가장 많은 유저가 사용하는 라이브러리중 하나이다.

React 의 특징

Component 기반 구조

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 

React 는 UI 를 컴포넌트로 쪼개서 만드는데 한 페이지 내에서도 여러개의 독립적인 컴포넌트로 이루어져있다.

컴포넌트 단위로 쪼개져있기때문에, 전체적인 코드를 파악하기가 상대적으로 쉽다.

기능 단위, UI 단위로 캡슐화 시켜 코드를 관리하기 때문에 재사용성이 높다

 

Virtual DOM

2023.01.06 - [Javascript] - [JS] Virtual DOM 과 Real Dom 의 차이점

DOM ( Document Object Model ) : HTML 문서를 객체로 표현한 것.

실제 DOM 을 조작하지 않고 Virtual Dom 을 조작하면서, 바뀐 부분만 비교해서 그 Dom 만 리렌더링 하기때문에 실제 Dom 을 사용하는 것보다 빠르다. ( Svelte 예외, 링크 참조 ) 

특히 SPA 에서는 하나의 HTML 이 Real DOM 한개이기 때문에 불변성과 Virtual Dom 이 더 중요하다

JSX

JSX는 리액트 고유의 문법으로  JavaScript Syntax eXtension  또는 JavaScript Xml 의 줄임말이다.

자바스크립트 확장 문법이라는 뜻으로 HTML + JavaScript 를 합쳐놓은 특징을 보여준다.

이 페이지는 빌드시 Babel 에 의해 자바스크립트로 변환된다.

const App = () => {
   return (
     <div>
       <Header />
       <Content />
       <Footer />
     </div>
   ); 
}

기본적으로 컴포넌트들과 하나의 요소로 감싸져있어야한다.

이는 컴포넌트 내부를 하나의 DOM 트리 구조로 이루어져야하는 규칙 때문이라고한다.

React 의 장,단점

장점

• React 공식 문서와 방대한 커뮤니티가 있어 쉽게 접하고 배울수 있다.
• Component 로 관리를 하기 때문에 가독성이 좋다.
• 다른 FrameWork 나 라이브러리와 병행해서 사용이 가능하다

단점

• IE 8 이하는 지원하지 않는 호환성
• 느린 로딩시간
• 웹이 지향하는 것과 동떨어져있다.
  • 웹이 지향하는 것은 Streaming 하면서, 가벼운 Response 만 브라우징 하는 것이지만,
  • 리액트는 한번 다운로드 한 데이터를 다운로드 하지 않기에 핵심 지향점과 동떨어져있다.

React 에서 불변성이 중요한 이유

 React 에서 불변성이 중요한 이유는 VIrtual Dom 과 관련이 있는데, Virtual Dom 은 얕은 비교를 통한 상태의 변화를 비교해서 데이터를 업데이트 하는데 만약 불변성을 지키지 않아 참조값이 변하게 된다면, 현재의 값과 바뀐 상태의 값의 변화를 알지 못하기 때문이다.

불변성을 지키는 방법은 map, filter, reduce 등등 새로운 배열을 반환하는 메소드를 사용해서 불변성을 보존할 수 있다.