React.js

React란?

• React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용한다.
• React는 facebook에서 제공해주는 프로트엔드 라이브러리라고 볼 수 있다.
• 싱글 페이지 어플리케이션이나 모바일 어플리케이션의 개발 시 토대로 사용될 수 있다.

 

React의 필요성

React가 없어도 html과 css, javascript를 이용해서 웹 페이지를 만들 수있다.

그러나, react를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다!!!

 

React의 특징

• Data Flow
• Component 기반 구조
• Virtual Dom
• Props and State
• JSX

 

Data Flow

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

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

 

Component 기반 구조

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

React는 UI(View)를 여러 컴포넌트(Component)를 쪼개서 만든다.

한 페이지 내에서도 여러 부분을 각각 독립된 컴포넌트로 만드록, 이 컴포넌트를 조립해 화면을 구성한다.

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

 

Virtual DOM

• DOM(Document Object Model)은 html, xml, css 등을 트리 구조로 인식, 데이터를 객체로 간주하고 관리한다.
• React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
• 이벤트가 발생하면 Virtual DOM을 다시 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 어플리케이션의 효율성과 속도를 개선할 수 있었다.

 

Props and State

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

 

JSX

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