[React] React.js란?

React란?

facebook에서 제공해주는 자바스크립트 UI 라이브러리로서 사용자 인터페이스를 만들기 위해 사용된다.
리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니 프레임워크 Angular와 달리 웹을 만드는데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 따라서 추가적인 라이브러리를 사용해줘야 함.

📌 프레임워크와 라이브러리의 차이는?

	프레임워크	라이브러리
공동점	다른 사람이 만들어 둔 코드
차이점	다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것	내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것
예)	Spring, Angular, django	jQuery, react

 

 

왜 React를 사용할까?

React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있다.

JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해줘야한다. 따라서 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면 관리하기 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.

하지만, 리액트는 Virtual DOM을 사용해서 빠른 성능을 유지하도록 한다.

 

React의 특징

선언형

어떻게가 아닌 무엇이 되면 되는지 즉, 최종 결과물을 선언하고 react에 전달하면 어떻게 해야 하는지는 react에서 알아서 처리한다.
React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

선언적 vs 절차적

📌 절차적 개발이란?
목표를 이루기 위해서 어떻게(How) 개발해야 하는지에 초점을 맞추어서 진행한다. 만일 목표에 제대로 도달하지 못했다면 어떤 과정에서 문제가 생겼는지 모든 과정을 되짚어 보아야 한다. 이는 코드가 길어질수록 유지보수가 어려워진다.

 

Virtual DOM

React가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 기술이다.
DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주 하게되고, 그만큼 PC 자원을 많이 소모하게되는 문제를 해결하기 위한 기술이다.

[참고 : https://141227.tistory.com/247 ]

[Web] Virtual DOM이란?

 

Componenet 기반 구조

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

Component란? 재사용이 가능한 각각의 독립적인 단위의 소프트웨어 모듈

 

Props and State

React에서 구성요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.

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

 

단방향 데이터 흐름

React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징을 보인다. 페이스북에서 Flux라고 부르는 패턴이 적용되어 있는데, 단방향 바인딩이 특징이다.

페이스북과 같은 대규모 어플리케이션들의 등장하게 되면서, 사용자와의 상호작용이 뷰(view)를 통해서 일어나고, 이따금 사용자의 입력에 따라 뷰가 모델을 업데이트해야하고, 의존성때문에 하나의 모델이 또 다른 모델을 업데이트해야하는 특성을 가진 MVC패턴은 자칫하면 어플리케이션의 내부 구조를 복잡하게 만들었고, 이는 페이스북 개발팀들의 큰 골칫거리로 이어저 이를 해결하고자 페이스북 개발팀은 Flux 아키텍처를 개발하여 적용하기로 하였다.

 

JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법으로 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

결론적으로 사람들은 왜 리액트에 열광할까? 🤔

첫번째, 자바스크립트 기반으로 다른언어 배울필요 없음
두번째, 구조가 쿨하다. 요소별, 컴포넌트별로 나눠서 작업할 수 있음
세번째, 단방향(unidirectional) 데이터플로우를 가지고 있다. 데이터가 변하면 UI가 업데이트 됨 즉, UI에서는 데이터를 바꿀 수 없 다. (데이터 -> 데이터 변경 -> UI 변경)

위 세가지가 전 세계가 리액트에 열광하는 이유이다. 추가적으로 리액트는 프레임워크가 아니라 UI 라이브러리이므로 (MVC에서 View) 나머지는 원하는 대로 골라서 쓸 수 있다.

Welcome to React !