![다시 시작하는 리액트 - 리액트 심화 1-3](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvMmnc%2FbtsdduIztdA%2FhTcECFBYhIqecGktI38v81%2Fimg.png)
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()는 엘리먼트에 변화가 필요할 경우 필요한 부분만 업데이트 해주는 역할을 함.
'(심층)리액트' 카테고리의 다른 글
다시 시작하는 리액트 - 리액트 심화 2-1 (0) | 2023.05.01 |
---|---|
다시 시작하는 리액트 - 리액트 심화 1 과제 (0) | 2023.04.30 |
다시 시작하는 리액트 - 리액트 심화 1-2 (0) | 2023.04.27 |
다시 시작하는 리액트 - 리액트 심화 1-1 (0) | 2023.04.18 |
다시 시작하는 리액트 - 리액트 실무 기초 5-6 과제 (0) | 2023.04.18 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!