React
- 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용.
지속적으로 데이터가 변화하는 대규모 애플리케이션에 사용.
오직 V(View)만 담당
=> 뷰에만 신경쓰는 라이브러리 이므로 기타 기능은 직접 구현해야 하지만
라우팅에는 리액트 라우터, Ajax 처리에는 axios / fetch, 상태 관리에는 redux / MobX를 사용.
초기 렌더링
- render() {} 함수
컴포넌트가 어떻게 생겼는지 정의하는 역할
html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환
렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고,
우리가 정하는 실제 페이지의 DOM 요소 안에 주입.
Virtual DOM
- 실제 DOM에 접근하여 조작하는 대신, 추상화한 자바스크립트 객체를 구성하여 사용.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용
JSX
- 자바스크립트 확장 문법으로 XML과 비슷
- 번들링되면서 babel-loader를 사용하여 자바스크립트로 변환
- 리액트용이기 때문에 공식 자바스크립트 문법은 아님.
장점
- 가독성, 오류 검사, 높은 활용도
JSX 문법
1. 감싸인 요소
컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야함.
=> Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록
컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙
Fragment
div 같은 것으로 감싸지 않고 여러 요소를 렌더링 하고 싶다면, 리액트를 불러올 때 Component와 함께
Fragment를 불러와서 사용
import React, { Component, Fragement } from 'react';
class App extends Component {
render() {
return (
<Fragment>
<h1>h1 test</h1>
<h2>h2 test</h2>
</Fragment>
)
}
}
2. 자바스크립트 표현
자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸야함
3. if문 대신 조건부 연산자
조건에 따라 렌더링 해야 할 때 JSX 밖에서 if문 사용하거나,
{ }안에 조건부 (삼항)연산자를 사용
4. &&를 사용한 조건부 렌더링
JSX에서는 null값 외에도 false 값을 렌더링 하면 아무것도 나타나지 않음.
따라서 이때는 삼항 연산자 쓰는 대신 && 연산자로 조건부 렌더링을 할 수 있음.
{ condition && 'Hi' }
5. 인라인 스타일링
리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없음.
CSS 스타일을 자바스크립트 객체 형식으로 만들어 적용
6. class 대신 className
<div className="">
7. 태그는 꼭 닫아야 함
8. 주석
{/* 주석 */}
ReactDOM.render
컴포넌트를 페이지에 렌더링 하는 역할
react-dom 모듈을 불러와 사용할 수 있음
첫 번째 파라미터에는 페이지에 렌더링 할 내용을 JSX 형태로 작성
두 번째 파라미터에는 해당 JSX를 렌더링 할 document 내부 요소 설정
export (모듈 내보내기)
다른 파일에서 이 파일을 import 할 때, 위에 선언한 클래스를 불러오도록 설정