ReactJS ?
페이스북에서 제공해주는 프론트엔드 라이브러리.
높은 자유도
- 프레임워크인 Vue.js 나 Angular 와 달리 라이브러리로 관리되기 때문에 다양한 패키지들과 함께 사용할 수 있다.
선언적
- 데이터가 변경될 때 렌더링을 수행함으로써 사용자와의 상호작용이 필요한 UI 제작을 쉽게 만들어준다.
컴포넌트 기반
- 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들 수 있다. 또한 이를 조합해 복잡한 UI 를 만들 수 있다.
- 컴포넌트는 템플릿이 아닌 JavaScript 로 작성된다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달가능하고, DOM 과는 별개로 상태를 관리할 수 있다.
한 번 배우면, 어디서든 사용 가능
- React 는 Node.js 를 이용하여 서버에서도 랜더가 가능하고, React-Native 를 이용해서 모바일 앱을 만들 수도 있다.
특징
컴포넌트
React 는 컴포넌트 기반의 '라이브러리'
다수의 컴포넌트들이 모여 하나의 큰 UI 를 이룬다.
작은 컴포넌트들은 재사용성을 가지고 있기 때문에 효율적이다.
컴포넌트는 클래스형(stateful)과 함수형(stateless)으로 나누어진다.
One Way Data Flow
React 는 데이터의 흐름이 한 방향으로만 흐른다.
부모에서 자식으로 내려가기만 하고, 자식에서 부모로 데이터를 올려줄 수는 없다.
Props and State
- props
props 란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터.
읽기 전용 데이터라고 생각하면 된다.
자식 컴포넌트에서 전달 받은 props 는 변경이 불가능하고 props 를 전달해준 최상위 부모 컴포넌트만 변경할 수 있다.
- state
state 는 동적인 데이터를 다룰 때 사용.
사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용.
state 는 클래스형 컴포넌트에서만 사용가능하며 각각의 state 는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능.
하지만 자신보다 상위에 있는 state 는 변경이 가능하다.
state 를 변경해주는 함수를 props 로 받아 변경할 수 있다.
Virtual DOM
Virtual DOM 은 가상의 Document Object Model 을 말한다.
일반적으로 html 코드를 짜고 웹 브라우저에서 html 파일을 열게되면, html 코드들이 DOM 을 만든다.
그리고 만약 html 코드의 특정 한 부분이 변경되면 전체 DOM 을 새롭게 만들어 비효율적인 구조이다.
이러한 문제점들은 React 에서 해결이 된다.
React 는 가상의 DOM 을 만들어 진짜 DOM 과 비교하고,
변경 사항이 있을 경우 변경된 부분만 진짜 DOM 에 반영하는 방식으로 작업을 수행한다.
그럼으로써 앱의 효율성과 속도를 높일 수 있게 된다.
