[React] 추가 정보 (spa, 불변성, react hooks)

> SPA (single page application)

SPA는 HTML5의 History api를 통해 가능하다

 

> JSX를 사용하지 않을 때 (원래) 리액트에서 화면 그리는 방식 (비효율적)

 

React.createElement API (React.createElement(tag명, null , 내용))를 사용해서 엘리먼트 생성 후 이 엘리먼트를 In-Memory에 저장.

-> ReactDOM.render 함수(ReactDOM.render(만든 요소, 그릴 위치))를 사용해 웹 브라우저에 그리기

 

> 불변성

원시타입은 Call Stack 메모리 공간에 참조 및 값 저장/ 고정된 크기 

참조 타입(객체, 배열)은 heap이라는 곳에 값을 저장하고, Call Stack에는 그곳의 주소(Heap 메모리 참조 ID)를 값으로 저장한다.

왜 불변성을 지켜야하는가?
1. 참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기 때문에 이 원본 데이터를 참조하고 있는 다른 객체에서 오류가 생길 수도 있다.

2. 리액트에서 화면 업데이트할 때 불변성 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트하기 떄문에 불변성을 지켜줘야한다.

> 어떻게 지켜주는가?

새로운 배열을 반환하는 메소드 사용하기 (spread operator, map, filter, slice, reduce 등)

> React Hooks란?

class없이 state를 사용할 수 있게 해준다.

함수형 컴포넌트에서도 생명주기를 사용할 수 있게 해준다.

HOC 컴포넌트를 Custom React Hooks로 대체해 많은 Wrapper 컴포넌트를 줄여준다. (.Wrapper가 많아지면 데이터 흐름을 파악하기가 힘들어진다)

(HOC: 화면에서 재사용 가능한 로직을 분리해 component로 만들고, 재사용 불가한 것들은 parameter로 받아서 처리하는 방식. 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다)

 

리액트 생명주기

componentDidMount, componentDidUpdate, componentWillUnmount ->Hooks에서는 useEffect