다시 시작하는 리액트 - 리액트 심화 1-3

 

3. 리액트 본격적으로 살펴보기

 

3-1. CRA로 첫 리액트 프로젝트 세팅하기

 

1. node로 yarn 설치하기

 

node -v
# node 버전을 확인해봅니다.

npm -v
# npm은 노드의 패키지 매니저예요. 이걸 통해서 누군가 만들어 둔 패키지를 설치하고 사용할 수 있어요!

npm install -g yarn
# -g는 글로벌로 설치하겠다!고 알려주는 옵션입니다. yarn을 글로벌로 설치해봅시다!

 

2. yarn으로 create-react-app 설치하기

 

yarn -v
# yarn 버전을 확인해봅니다.
# global은 글로벌 설치 옵션입니다.
# yarn은 npm과 명령어가 조금 다른데요, install 대신 add를 씁니다.
# 이런 명령어의 차이는 공식문서를 통해 확인해도 좋고, yarn --help로 확인해도 좋습니다.
# yarn으로 create-react-app을 설치합니다.

yarn add create-react-app global

 

3. create-react-app으로 프로젝트 만들기

 

yarn create react-app first_react_app
# 첫번째 프로젝트를 만들어봅시다!

 

 

3-2. CRA 없이 리액트 프로젝트 세팅하기

 

지금 딱히 필요한 건 아니기 때문에 생략하겠음.

나중에 다시 한 번 들어보는 거로.

 

 

3-3. Virtual DOM(가상돔)

 

- 가상돔이란? :

 

👉 렌더링 엔진 동작과정 :
  - 파싱 단계
  - 렌더 트리 단계
  - 레이아웃 단계
  - 페인트 단계

 

자바스크립트로 직접 DOM을 조작할 때,(엘리먼트 추가, 삭제 등의 변경이 있을때)

레이아웃 단계와 페인트 단계에서 연산 비용이 많이 들어감.

 

성능 최적화 => 적은 연산 비용이 들게 하기. 빨리 끝내기.

그러므로, 성능 최적화를 하고 싶다면 레이아웃 단계와 페인트 단계에 드는 연산을 줄이는게 중요.

=> 노드가 어디에 그려져야 하고, 모양이 어때야 하는지 계산하는 것. 그리고 계산한 대로 화면에 배치하는 것.

 

고로, 성능 최적화를 위하여 가상돔을 사용하면 됨.

 

----------------------------------------------------------------------------------------------------------------------

 

리액트는 SPA 방식임. html이 하나 밖에 없음.

모든 바뀌는 모습을 화면에 보여주려면 DOM 조작이 끊임없이 일어나야 하며, 수정이 엄청나게 발생.

 

여기서 최적화를 하려면 최대한 무엇 무엇을 수정할 건지 모아놨다가 한 번에 처리를 해줘야 함.

이때 가상돔을 이용.

 

----------------------------------------------------------------------------------------------------------------------

 

• DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면?                                          → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔!
• 가상돔은 메모리 상에서 돌아가는 가짜 DOM.
• 가상돔의 동작 방식: 실제 DOM을 하나 copy하여 메모리 안에 넣어둠.(실제로 렌더링이 되는 게 아니기 때문에 연산 비용이 굉장히 줄어듦.) 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줌. → 돔 업데이트 처리가 정말 간결함!

 

 

알면 덜 찜찜한 이야기: DOM이 정말 그렇게 느려?

반은 맞고 반은 틀려요.
DOM은 사이트 구조에 따라 가상돔을 쓰는 것보다 훨씬 성능이 좋을 수 있고(=빠를 수 있고),
속이 터지게 느릴 수 있습니다.

 

 

3-4. 함수형 컴포넌트 1

 

-  함수형 컴포넌트란? :

 

Component란?
감잡을 때 이렇게 배웠어요 : React가 레고라면 Component는 블록입니다!

여러분은 이제 이렇게 기억하세요 :독립적인 기능을 수행할 수 있는, 재사용이 가능한 최소 단위

 

-  함수형 컴포넌트 생김새 :

 

function IAmComponent(props) {
  return (<p>I am component! :) Functional component!</p>);
}

 

- 함수형 컴포넌트 만들기

 

//MyComponents.js

const One = () => {
  return (
    <div>
      <h1>One</h1>
    </div>
  )
}

const Two = () => {
  return (
    <div>
      <h1>Two</h1>
    </div>
  )
}

export default One;
export { Two };

// js 파일 하나 당 default는 한 번만 할 수 있음 => 대표로 나간다는 뜻
// 또 내보내야 하는 것이 있다면 그냥 export를 하고 중괄호 안에 컴포넌트 name 집어넣기.

 

- App.js에서 불러오기

 

//App.js

import One, { Two } from './MyComponents';

// export default를 해서 가져온 컴포넌트는 이름을 아무렇게나 지정이 가능함.
// but, export를 해서 가져온 컴포넌트는 기존의 이름을 그대로 가져다 사용해야 함.(중괄호 안에 넣어주기)
// 그런데 만약, 이러한 상황 속에서 이름을 수정하고 싶다면 as를 사용하여 별칭 지정을 해주면 됨.
// { Two as TwoTwo } => 이런 식으로.

function App() {
  return (
    <div className="App">
      <One/>
      <Two/>
    </div>
  );
}

export default App;

 

 

3-5. 함수형 컴포넌트 2 - 상태 관리

 

컴포넌트의 데이터 관리를 상태 관리라고 함.

 

-  state와 props : 컴포넌트가 가지고 있는 data.

 

• state : 

1. Component가 가지고 있는 데이터.

2. 함수형 컴포넌트는 useState() 훅을 사용해서 상태값을 가질 수 있음.

3. state는 직접 수정해선 안됨!

4. state는 비동기적으로 업데이트됨.

 

• props : 

1. Component가 부모 Component로부터 받아온 데이터.
2. 읽기 전용이라 props는 절대절대 수정하면 안됨!
3. props는 순수 함수처럼 동작해야 함.

 

※ 순수함수란? : 받아온 값(인자)를 수정하지 않고, 항상 같은 값을 넣으면 동일한 결과를 내주는 함수

 

컴포넌트 내에서 값을 직접 할당(변경)하지 말아라!!

=> state, props의 값을 임의로 변경하게 되면 컴포넌트가 재렌더링 되지 않음. (화면에 나오지 X)

 

const IamPureFunction = (a, b) => {
  return a+b;
}

// a, b가 변하지 않았고, 1과 2를 넣으면 언제나 3이 나온다!
IamPureFunction(1, 2);


// a가 바뀌었으니 순수하지 않다!
// 이외에도 랜덤 함수를 사용해 랜덤한 값을 리턴해도 순수하지 않다!
const IamNotPureFunction = (a, b) => {
  a = b-a;
}

IamNotPureFunction(5, 9);

 

-  useState hook : state의 값을 변경하고 싶을 때 사용하는 hook

 

change! button을 누를 시 name 변수가 변경되도록 useState hook을 사용하여 코드를 짜봄.

 

import React, { useState } from "react";

// MyComponents.js

const One = (props) => { 
  const [name, setName] = useState("mean0"); 
 
  return (   
    <div>     
      <h1>One</h1>     
      <p>{name}</p>     

      <button onClick={() => { setName("유승민"); }}> change! </button>
    </div>
  );
};

export default One;

 

 

 

3-6. 컴포넌트가 돔에 그려지려면? :

 

앞선 강의 함수형 컴포넌트를 만들어봤습니다.😊
함수형 컴포넌트가 return 해주는 엘리먼트가 화면에 표시되는 것도 확인했지요

return (
  <div>
    <h1>ONE</h1>
    <p>{name}</p>
  </div>
)

=> DOM과 똑같이 생겼지만 진짜 DOM이 아님. 이것을 React 엘리먼트라고 함.

이 엘리먼트들을 React 엘리먼트라고 해요.
react 엘리먼트는 Dom 엘리먼트와는 달리 일반 객체 + 불변 객체

화면에 뿌려져 있는 것은 Dom 엘리먼트.

 

- 어떻게 React 엘리먼트를 return 했는데 DOM 엘리먼트가 뿌려질 수(화면에) 있을까? : 

 

React DOM이라는 걸 사용하기 때문.

React DOM을 이용하여 React 엘리먼트와 실제 DOM을 같게 만들어 줌.

 

• ReactDOM.createRoot()

이걸 루트 DOM 노드라고 불러요.
우리가 만든 모든 컴포넌트는 이곳에 들어가게 될 겁니다.

!주의! 물론 예외가 있습니다.
나중에 다뤄볼 Portal인데요, Portal을 사용할 부분을 제외한 모든 컴포넌트는 루트 돔 노드에 들어갈거예요.

src/index.js를 열고 루트를 어떻게 만드는 지 확인해봅시다.

const root = ReactDOM.createRoot(document.getElementById('root'));

=>root div를 가지고 와서 createRoot라는 함수를 사용해서 Root 객체라는 걸 만들어 줌.
그리고 Root 객체가 가지고 있는 render라는 함수를 호출함.

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

render()는 루트 돔 노드에 리액트 엘리먼트를 전달하는 역할을 함. (화면에 띄워줌)

리액트 엘리먼트는 기본적으로는 불변객체.
속성, 자식 등 엘리먼트의 내용을 변경할 수 없음.

render()는 엘리먼트에 변화가 필요할 경우 필요한 부분만 업데이트 해주는 역할을 함.