React 입문

React 란?

 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

 

• Facebook에서 개발한 라이브러리
• SPA(Single Page Application) 개발 시 사용
• 재사용 가능한 UI 구성 요소 생성
• 오로지 view만 담당
• 내장 기능이 부족해 third-party 라이브러리(react-router-dom, redux) 등 함께 사용
• Vritual DOM을 통해 최적화를 구현

 

왜 React 일까??

• Virtual DOM을 사용하여 최종 변화만 실제 DOM에 전달하기 때문에 빠른 성능 유지
• Component 기반 구조로 재사용 및 유지보수 용이
• 생태계가 넓고 다양한 라이브러리 사용 가능
• React Native 활용한 앱 개발 가능

 

React 특징

단방향 데이터 흐름

Component 기반 구조

Virtual DOM

• DOM = Document Object Model 약자
• html, xml, CSS 등을 트리 구조로 인식, 데이터를 객체로 간주하여 관리
• DOM Tree 구조와 같은 구조체인 Virtual DOM
• 변경이 필요한 최소한의 변경사항만 실제 DOM 반영

Props and State

• Props : 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
• 최상위 부모 컴포넌트만 props 변경 가능
• State : 데이터를 동적으로 변경할 때 사용

JSX 문법

 

• Javascript를 확장한 문법
• 파일에 마크업과 로직을 넣음

 

 

Reference

• https://reactjs.org/
• https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
• https://www.c-sharpcorner.com/article/what-and-why-reactjs/
• https://react.vlpt.us/basic/