React JS
- 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈소스 JavaScript 라이브러리
- 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합
- 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등에서 사용
React란?
- 화면을 만들기 위한 자바스크립트 라이브러리
- 현재 가장 많이 활용되고 있는 인기 있는 라이브러리
- 사용자와 상호 작용이 가능한 동적 UI 제작 가능
프레임워크와 라이브러리의 차이?
- 프레임워크는 다른 사람들이 만들어둔 틀 속으로 내가 들어가는 것이지만 라이브러리는 내 작업에 다른 사람들이 만들어둔 코드를 가져와서 사용하는 것이다.
- 내가 불려가면 프레임워크, 내가 부르면 라이브러리
React의 특징
- Data Flow
- Component 기반 구조
- Virtual Dom
- Props and State
- CRA
- JSX
Data Flow
- React는 데이터 흐름이 한 방향으로 흐르는 단방향 데이터흐름을 가짐
- 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 데이터 흐름에서 일어나는 변화를 보다 예측가능할 수 있도록 단방향 흐름을 가지도록 했음
Component 기반 구조
- Component는 재사용이 가능한 UI 구성 단위이다. Component를 사용했을 땐 여러 장점이 발생한다.
- 코드 재사용성 증가
- 코드 유지보수가 용이해짐
- 해당 페이지가 어떻게 구성되었는지 파악하기 쉬워짐
- 컴포넌트는 단일개념이 아니라 또 다른 컴포넌트를 포함
Virtual Dom
- 가상의 Document Object Model을 말함
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있음
Props and State
- Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 의미(읽기전용 데이터 라고 생각하면 편함)
자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트가 props를 변경할 수 있음
- State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용
클래스 컴포넌트에서만 사용할 수 있고, 각각의 State는 독립적이다.
CRA
- Create React App의 약어
CRA는 리액트 프로젝트를 시작할 떄 필요한 개발 환경을 세팅해주는 도구(toolchain) - 리액트는 UI 기능만을 제공하는 라이브러리
그러나 실제 온전한 웹사이트를 구축하기 위해서는 UI 구성 외에도 여러가지 다른 도구들이 필요하다. 그래서 리액트로 프로젝트를 진행하기 위해서는 필요한 도구들을 toolchain이라고 부른다. - CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공
- CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능
JSX
JavaScript Syntax Extention의 약어, 말 그대로 자바스크립트 확장 문법이다.
JSX로 작성한 코드는 실제 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 한다.
특징
- 모든 태그들은 하나의 부모태그로 감싸져 있어야 한다.
- 모든 태그가 셀프 클로징이 가능하다.
- 모든 property들은 camelCase로 사용해야 한다.
- 자바스크립트 동작이 가능하다.
장점
- HTML 태그를 그대로 사용하기 때문에 사용감이 익숙하다.
- HTML 마크업과 자바스크립트 로직을 같이 구현할 수 있다.
- 자바스크립트 문법을 이용해서 HTML을 생성할 수 있다. 별도의 HTML 파일이 필요하지 않다.
참고 블로그
꾸준히합니다.