~43일차~
- 목차
1. React
2. Component
3. 가상(Virtual)DOM
4. 설치 및 실행 방법
5. SPA
6. JSX
1. React
- React는 사용자 인터페이스를 만들기 위한 JS 라이브러리
- 인터렉션이 많은 웹 앱 개발에 주로 사용
Framework vs Library
Framework: 앱을 만들기 위해 대부분의 것(Library 포함)을 가지고 있는 것Library: 특정 기능을 모듈화 해놓은 것- Framework > Library
-Framework는 소스 코드를 호출
-기능 구현을 위해 코드가 Library를 호출
2. Component
- 리액트로 만들어진 앱을 이루는 최소한의 단위
Class Components vs Functional Components
- 리액트 Hooks 발표 이후
함수형을 더 많이 이용
Class Components
class App extends Component { render() { return <h1>안녕하세요.</h1>; } }
Functional Components
function App() { return <h1>안녕하세요.</h1>; }
3. 가상(Virtual)DOM
-
일반적으로 DOM 사용 시 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 것이 가장 큰 단점
-
가상DOM은 실제로 스크린에 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다.
-
Real Dom처럼 직접적으로 브라우저 문서에 접근 X
-
화면에 보이는 요소 직접 수정 X
작동 방식
① 어떠한 데이터(state)가 바뀌면 가상돔 새로 생성
② 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용
- Diffing : 바뀐 부분을 찾는 과정
- reconciliation(재조정) : 바뀐 부분만 실제 돔에 적용시켜 주는 것
결론
reconciliation을 통해 10개의 state데이터가 변한다해도 DOM 10번을 반복하는게 아니라, 가상돔을 비교해서 한번의 DOM 조작으로 모든 변화를 반영
4. 설치 및 실행 방법
설치
최근 1순위 - npx create-react-app ./
예전에는 웹팩과 바벨로 설치
실행
npm run start
5. SPA
- Single Page Application
- 웹 사이트의 전체 페이즈를 하나의 페이지에 담아, 동적으로 화면을 바꿔가며 표현
- vs
Multi Page Application: 이전에 사용한 방법.
History API
-
HTML 5의 History API를 이용하여 화면 이동이 일어난 것처럼 작동하게 해줌
-
History.back() : 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드
-
History.forward() : 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드
-
History.go() : 특정 세션 기록으로 이동하는 비동기 메서드
-
History.pushState() : 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JS 객체를 저장하는 것이 가능
-
History.replaceState() : 최근 세션 기록의 내용을 주어진 데이터로 교체
6. JSX
- Javascript syntax extension
- JS의 확장 문법
- 화면에서 UI가 보이는 모습을 나타냄
_ JS(logic)와 HTML구조(markup)를 같이 사용, 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현
주의사항
- 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야한다.
<div></div>를 넣어도 되지만<></>사용이 더 일반적
