- 따라하며 배우는 리액트 A-Z를 수강하며 개인적으로 메모한 내용입니다.
리액트 컴포넌트(component) 종류
리액트로 만들어진 앱을 이루는 최소한의 단위
- 클래스 컴포넌트
class App extends Component{
render(){
return <span>Hello World!</span>;
}
}- 함수형 컴포넌트
function App(){
return <span>Hello World!</span>;
}함수형 컴포넌트에서 생명주기(Life Cycle) 메소드를 사용할 수 없었으나, hook을 이용해 생명주기 관리가 가능해졌다.
ex) useState를 이용한 상태 변수 선언
웹페이지 빌드과정 (Critical Rendering Path)
웹 브라우저가 HTML문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정.
먼저, DOM은 문서 객체 모델로, HTML이나 XML 문서의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
- DOM Tree 생성: 랜더 엔진이 문서를 읽어 파싱하고 어떤 내용을 페이지에 랜더링 할지 결정
- Render Tree 생성 : DOM과 CSSOM을 결합하는 곳 > 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력
- Layout(reflow) 브라우저 페이지에 표시되는 각 요소의 크기와 위치를 계산
- Paint : 실제 화면에 그리기
DOM에 작은 변화라도 생기면 Render Tree가 재생성되는데, 인터랙션이 많아 DOM에 변화가 자주 갈수로 비용이 커지게 된다. >> 해결법: 가상 DOM
- 재조정 (reconciliation)
인터랙션에 의해 DOM에 변화가 생겼을때, 가상 DOM에 먼저 랜더링하고 비교해서 바뀐부분만 실제 DOM에 적용시켜 비용을 줄인다.
SPA (Single Page Application)
웹사이트의 전체 페이지를 하나의 페이지로 담아 HTML5의 History API를 사용해 동적으로 화면을 전환시켜준다.
- history.back() : 비동기 메서드, 바로 뒷 페이지로 이동.
- history.forwoard() : 비동기 메서드, 바로 앞 페이지로 이동.
- history.go() : 비동기 메서드, 괄호안에 go(-1)은 back()과 같고, go(1)은 forward(와 같다.
- history.pushState() : 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 JS 객체 저장 가능
- history.replaceState() : 최근 세견 기록 스택의 내용을 주어진 데이터로 교체
React State
컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체.
- 리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해 사용
- State는 컴포넌트 안에서 관리
- 사용자 입력 데이터를 useState로 받는 이유: 데이터 입력을 한정적으로 만들어 사용자와의 상호작용을 독점 > ? 왜지(제보받습니다)
불변성
- 원시 타입(immutable) : 고정된 크기로 Call Stack에 저장, 실제 데이터가 변수에 할당 Boolean, String, Number, null …
- 참조 타입(mutable) : 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 Heap에 저장되며 변수에 Heap 메모리의 주소값이 할당 Object, Array
불변성을 지켜야 하는 이유
- 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터를 참조하고 있는 다른 객체에서 오류가 발생할 수 있다.>프로그램 복잡도 ↑
- DOM을 재조정할 때 이전 값과 비교하기 위해
불변성을 지키는 방법
참조 타입 변수에서 Heap 메모리 값만 바꾸면 Call Stack주소 값에는 변동이 없기 때문에 아예 새로운 배열을 반환하는 메소드를 사용한다.
>> spread, operator, map, filter, slice, reduce
*사용하면 안되는(원본 데이터를 변경하는) 메소드 >> splice, push
const arr = [1, 2, 3, 4];
const sameArr = arr;
sameArray.push(5); // [1,2,3,4,5]
console.log(arr === sameArr); // true
const differArray = [...array, 5]; // [1,2,3,4,5]
console.log(arr1 === differArr); // false