인프런_1주차

Inflearn 따라하며 배우는 리액트 A-Z
Section 1. React란?

1. 리액트는 프레임워크가 아닌 라이브러리

리액트는 전적으로 UI를 렌더링하는데 관여하기 때문.

 

framework vs Library

프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음.

라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것.

프레임워크가 라이브러리보다 넓은 개념.

*가장 큰 차이는 제어흐름이 어디에 있는가이다.

프레임워크는 전체적 흐름을 쥐고 있으며, 라이브러리는 개발자가 전체적인 흐름을 만듦.

즉, 수동적이냐 능동적이냐 차이

 

2. 리액트 컴포넌트

Component: 리액트로 만들어진 앱을 이루는 최소 단위

컴포넌트=독립적인 조각

즉, 하나의 페이지를 여러개의 컴포넌트가 모여 이룬다고 볼 수 있다.

하나의 컴포넌트를 여러곳에서 사용할 수 있음.( 높은 재사용성 )

각자 맡은 컴포넌트를 동시에 수정할 수 있음.

 

*Class Components: render()메소드가 있어야 함 + Component로 상속을 받아야 함.

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

*Funtional Components: 말그대로 함수형.

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

-> React Hooks 등장 후부터 함수형 컴포넌트가 더 많이 쓰임.

 

 

3. 브라우저가 그려지는 원리와 가상돔

렌더 엔진에서 문서를 읽어들여 파싱 & 페이지에 렌더링할 내용 결정한 후 DOM tree 생성

DOM과 CSSOM을 결합해 Render Tree 생성

 

어떤 인터렉션에 의해 DOM에 변화가 발생하면, Render Tree가 재생산됨. 

-> 모든 요소들의 스타일을 다시 계산하므로 불필요하게 DOM을 조작하는 비용이 너무 커짐.

 

이런 문제를해결하기 위해 Virtual Dom이 등장.

Virtual Dom: 실제 Dom을 메모리에 복사한 것.

이전 가상 돔과 이번에 바뀐 가상 돔을 비교 -> 바뀐부분을 찾음(Diffing) -> 바뀐 부분만 실제 돔에 적용(reconciliation)

 

4. 리액트 설치

전에 리액트를 설치한 적이 있어서 그때 작성했던 리액트 설치 관련 블로그 링크를 남긴다.

https://baekwisdom02.tistory.com/11

React 초기 셋팅