반응형
React.js
리액트란 SPA(Single Page Application)을 위한 자바스크립트 UI 라이브러리이다.
Why React?
- 코드의 재사용성
- 리액트는 컴포넌트 기반의 UI 라이브러리
- 컴포넌트 단위의 개발을 통해 반복되는 코드의 재사용성을 높임 - 선언적 프로그래밍
- JSX를 사용하여 선언적 프로그래밍 활용
- 명령형 프로그래밍에 비해 훨씬 목적이 뚜렷하고 간결한 코드 작성 가능 - Virtual DOM
- Virtual DOM을 사용하여 웹 애플리케이션의 성능을 극대화
[React.js] 컴포넌트, props, state
컴포넌트(Component) 리액트로 만들어진 앱을 이루는 최소한의 단위 UI를 기능에 따라 여러 컴포넌트로 나누어 개별적으로 작성 컴포넌트를 이용하여 코드의 재사용이 가능 컴포넌트는 props(데이터
sunho-doing.tistory.com
[React.js] JSX
JSX란 JSX는 리액트에서 사용하는 자바스크립트와 HTML을 동시에 사용할 수 있는 템플릿 언어이다. JSX로 작성된 코드는 브라우저에서 실행하기 전에 바벨을 통해 일반 자바스크립트 코드로 변환된
sunho-doing.tistory.com
[React.js] DOM과 Virtual DOM
웹 브라우저의 렌더링 DOM을 알기 전 웹 브라우저가 어떻게 우리에게 보여지는지 이해해보자. HTML과 CSS를 전달받아 파싱하여 각각 DOM과 CSSOM라는 트리 객체를 생성 DOM과 CSSOM을 이용하여 실제로
sunho-doing.tistory.com
Create React App
리액트로 개발 프로젝트를 시작하기 위해서는 Webpack이나 Babel 등 추가로 알아야하는 기술들이 존재한다. 하지만 이러한 기술들을 신경 쓰지 않고 바로 리액트 개발을 시작할 수 있는 방법이 Create React App 패키지를 사용하는 것이다.
프로젝트 생성
npx create-react-app 프로젝트명
프로젝트 실행
npm start
반응형
'Web-Frontend > React.js' 카테고리의 다른 글
| [React.js] React 생명주기 제어하기 - useEffect (0) | 2023.01.13 |
|---|---|
| [React.js] React에서 배열 사용하기 (0) | 2023.01.12 |
| [React.js] 컴포넌트, props, state (0) | 2023.01.08 |
| [React.js] JSX (0) | 2023.01.08 |
| [React.js] DOM과 Virtual DOM (0) | 2023.01.08 |