김민태의 데브캠프 2기 - React 배경지식 + 1하기

 

• 리액트란 무엇인가?
  
  React는 '사용자 인터페이스'를 만들기 위한 JavaScript 라이브러리
  인터렉션이 많은 웹 앱을 개발하기 위해 사용

       '컴포넌트'라는 단위를 사용, 

       웹이 아닌 앱으로도 동작 가능(react native)

       UI에 필요한 도구를 제공

       확장자 jsx

 

• • return 값이 html 마크업과 비슷한 형태
  • 함수 이름 첫글자는 무조건 대문자(파일명도 동일)
  • 컴포넌트 단위로 재사용이 가능
  • 사용자가 원하는 UI를 조립할 수 있도록 html 형태를 취한 함수형으로 제공해줌
  • return 내의 최상위 엘리먼트(div)는 하나만 존재해야함.
  • {}를 통해 변수를 html 태그 안에 삽입 가능
    • 시작 태그 안 / 태그 안의 content 에서 둘 다 사용 가능리액트의 특징

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

                       일관성 O, 유연성 X
라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 

                       일관성 ▲  유연성 O

리액트는 라이브러리이다.
전적으로 UI를 랜더링하기 때문이다.

리액트는 여러 컴포넌트를 이용하여 웹 앱을 개발한다.

• 컴포넌트란 ?
  • 재사용이 가능한 구성요소(UI)
  • html Tag로 이루어짐
  • 컴포넌트는 자기 자신을 호출할 수 없다.

              따라서 React에서 setState()로 호출하여 요청한다

검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스트 컴포넌트.. 등 

리액트 컴포넌트는 두가지가 있다.
1. 클래스형 컴포넌트
2. 함수형 컴포넌트
요즘은 Hooks를 발표한 이후로 함수형 컴포넌트를 이용하여 개발을 많이한다.

 

DOM을 활용한 화면 그리기 절차는 다음과 같다.

     a. DOM tree 생성- 랜더 엔진이 문서를 읽어 파싱학 어떤 내용을 페이지에 랜더링할지 결정 
     b. Render tree 생성 : 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 최종 랜더링 트리를 출력
     c. Layout : 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산
     d. Paint : 실제 화면에 그리기
HTML분석 후 화면에 나타냄 -> Critical Render Path

여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render tree가 재생성된다.
성능상 문제가 발생

이러한 문제로 인해 나오게 된 것이 가상 돔이다. 
이것은 실제 DOM을 메모리에 복사해준 것
작동원리 : 데이터가 바뀌면 가상돔에 랜더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용
Diffing : 바뀐 부분을 찾는 과정
재조정 : 바뀐 부분만  실제 돔에 적용시켜주는것
이러한 가상 돔 덕분에 만약 요소가 30개가 변했다고 하더라도 한번에 묶어서 한 번에 실제 돔 수정으로 처리하게 돼서 돔을 조작하는 비용을 줄이게 된다.

따라서, 변경이 일어나는 부분의 부모를 찾을 필요가 없이, 최상위 component를 호출만 하면 됨.

 

• property
  • 외부로 부터 데이터를 받는 형식(함수 매개변수) 줄여서 props
  • 객체
  • 태그 안에 값을 전달할 수 있음 ex) <Title value= 'vite' description = 'vite 라이브러리'></Title>                                 => Title함수에서 파라미터를 props라 가정하면 props.value / props.description으로 객체 내의 값을 불러올 수 있다.(value, description 등은 자유롭게 설정 가능)

function Title(props) {
	const { value, description } = props;
	//props.value -> value, props.description -> description으로 바로 사용 가능
	//파라미터 부분에 props 대신 {value, description}으로 선언해도 동일
	const myObj = {
		a : 1,
		b : 2,
		c : 3
	}

 

• event
  • 이벤트 핸들러 함수를 인라인 태그 형식으로 호출 가능
  • 호출 및 처리는 브라우저의 이벤트 시스템이 담당
  • 컴포넌트에서 각 태그는 모두 이벤트 속성을 처리 할 수 있다.

 

• 구조분해할당

	const myArr = [1, 2, 3];
	//...귀찮음
	
	//구조분해할당 문법
	const { a, b } = myObj;
	const {name, age} = myArr;
	//각각의 값에 이름을 주어서 값을 그대로 담는 형식

 

웹팩 : React, scss, Es6, Es7등을 웹 페이지에서 동작하는 HTML, css, ES5로 변환시켜줌 
바벨 : 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해 최신 자바스크립트 문법을 구형 브라우저에서도 동작하게 변한 시켜주는 라이브러리

요즘은 a태그를 사용한 여러개의 html을 만들어 화면을 이동하는 MPA대신 SPA를 사용하는데,

SPA에서 화면 변경은 어떻게 일어나는가?
HTML 5의 History API를 사용하여, 화면 이동이 일어난 것처럼 보여지게한다.