[React] 기초

ReactJS : 복잡한 사용자 인터페이스를 쉽게 구축하기 위해서 페이스북에서 제작한 자바스크립트 기반의 라이브러리

• 싱글 페이지 애플리케이션 OR 모바일 애플리케이션 개발에 주로 사용한다.
• 특정 데이터에 변화가 생길 때 매번 변화를 주기 위한 코드를 작성하지않고 기존 코드를 없애고 다시 새롭게 랜더링

 

Mount : 가장 처음 랜더링

• render() 함수를 사용하여 view를 정의하고 초기 랜더링을 진행한다.

Rendering: 화면에 보여주는 것

• 코드가 번역되어 실행된 뒤 화면을 통해 사용자에게 보여준다.

Re-Rendering: 뷰를 업데이트 해야 할때 다시 지웠다가 그림

• 전체를 모두 지우고 다시 그리는 것은 비효율적이기 때문에 이전의 DOM트리와 새로운 DOM트리를 비교한 뒤 변경된 요소 부분만 리랜더링 한다.
• 단, 부모가 리랜더링 되면 자식도 리랜더링 한다.

Component: 리액트에서 앱을 이루는 최소한의 단위

• 컴포넌트가 모여서 하나의 앱이 된다.
• 각 컴포넌트는 분리되어 재사용이 가능하다.

Virtual DOM: 화면보다 Virtual DOM에 먼저 랜더링 된다.

• 컴포넌트에 변화가 감지되면 Virtual DOM으로 랜더링되며 이전 Virtual DOM과 현재 Virtual DOM을 비교하여              필요한 부분을 리랜더링 시킨다.
• 화면보다 Virtual DOM에 먼저 랜더링 된다.

 

1. Jsx 파일 생성

Jsx01.jsx

 

2. index.js 파일 내에서 호출

index.js

 

그 후 터미널에서 yarn start 하면 화면에 안녕 리엑트! 😎, 첫 컴포넌트야! 가 출력된다.