[React] 개념

- 페이스북에서 제공해주는 프론트엔드 라이브러리

 

- Component 기반: Component에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여준다.-> 코드의 재사용성과 유지보수성을 증가

 

 

- JSX 문법: 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 준다.

 

- 단방향 데이터 바인딩: 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.

 

- Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

 

- State: 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용.

각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능.

 

그러나 자신보다 상위에 있는 state는 변경이 가능하고 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능.

 

- Virtual DOM: 가상의 Document Object Mode.로 실제 DOM을 조작하는게 아닌, DOM을 추상화한 자바스크립트 객체를 구상해 사용

*DOM(Document Object Mode): Javascript Node 개체의 계층화된 트리로, HTML/XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.

 

장점

- Controller, Directive, Template, Model처럼 분리하지 않고 Component 단 하나로 관리.

- 서버 사이드 렌더링과 클라이언트 사이드 렌더링 둘 다 지원. -> 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능

- 간편한 UI 수정과 재사용이 용이.

- React는 프레임워크가 아닌 라이브러리기 때문에 다른 프레임워크나 라이브러리와 혼용하여 사용 가능. 즉, 개발이 완료된 서비스에도 적응 가능

 

단점

- 보여지는 부분에만 관여하기 때문에 데이터 모델링, 라우팅, Ajax 등등의 기능을 제공하지 않는다.

- view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 Javscript 배경지식이 부족할 경우 사용이 힘들다.