[React] React.js란

React

웹 프레임워크로, JavaScript 라이브러리의 하나로써 사용자 인터페이스를 만들기 위해 사용한다.

React는 FaceBook에서 제공해주는 Front-End 라이브러리라고 볼 수 있다.

싱글 페이지 어플리케이션(SPA)이나 모바일 어플리케이션 개발 시 주로 사용한다.

React 특징

Data Flow

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

Component 기반 구조

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

 

React는 View를 여러 Component를 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 Component를 만들며, 이 Component를 조립하여 화면을 구성한다.

 

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

Virtual DOM

DOM은 Document Object Model의 약자다. DOM은 Html, Xml. Css 등을 트리 구조로 인식하며, 데이터를 객체로 간주하고 관리한다.

 

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

Props and State

Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. 쉽게 읽기 전용 데이터라고 생각하면 되며, 자식 컴포넌트에서 전달받은 Props는 변경이 불가능하고 Props를 전달해준 최상위 부모 컴포넌트만 Props를 변경할 수 있다.

 

State란 컴포넌트 내부에서 선언하고 내부에서 값을 변경할 수 있다. State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해서 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용이 가능하고, 각각의 State는 독립적이다.

JSX

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

 

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

 

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 한다. 또한 React가 더욱 도움이 되는 에러와 경고 메시지를 표시할 수 있게 해준다.

// 예시 코드

const element = <h1>Hello, world</h1>

출처: https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

출처: https://ko.reactjs.org/docs/introducing-jsx.html