[React] - JSX 문법(1)

seunghyo·2023년 2월 22일
0

React

목록 보기
1/5
post-thumbnail

1. 리액트란 🌟

자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 오직 View만을 신경쓰는 라이브러리이다. 렌더링이란 사용자에게 보여주기 위해 데이터와 코드를 html 파일로 변환하는 과정이다. 맨 처음 어떻게 보일지 정하는 초기 렌더링은 필수적이다. 리액트에서는 render 함수가 있다. 렌더링을 통해 html 마크업을 만들고, 이를 실제 페이지의 DOM 요소 안에 주입한다. 컴포넌트는 업데이트 값을 수정하는 것이 아니라 새로운 데이터를 가지고, render 함수를 다시 호출한다. 이때 render 함수는 반환 결과를 바로 DOM에 주입하지 않고, 이전 컴포넌트 정보와 비교하여, 최소한의 연산으로 DOM 트리를 업데이트 한다. 처음부터 렌더링 하는 것이 아니라, 최적의 자원을 사용하여 수행한 것이다! 그렇기 때문에 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

- 리액트 환경 세팅 -

node.js 와 npm을 설치해주었다.

$npm init react-app <이름> 
$npm start

0개의 댓글