React

React yarn생성

yarn create react-app 폴더이름

Vite

: CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드도구, CRA대신 Esbuild를 사용해서 속도가 빠르다.

vite로 생성

yarn create vite my-first-vite-react-app --template react

vite의 특징

• 빠른 콜드스타트, HMR(Hot Module Replacement)
• CRA는 기본적으로 설정을 숨기지만
  VIte는 사용자가 필요에 따라 설정을 쉽게 조정
• Esbuild 를 사용

vite로 만든 소스의 흐름

1. 내부적으로는 단 하나의 index.html만 존재
2. Root라는 div안에 요소들을 넣음

리액트 컴포넌트

:컴포넌트를 통해 UI를 재사용이 가능한 개별적인 조각으로 나누고 재사용이 가능하게끔 만든다.

• JavaScript함수와 유사

• props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지 기술하는 엘리먼트를 반환한다.

• 리액트 컴포넌트를 표현하는 방법

  1. 함수형 컴포넌트(권장)
  2. 클래스형 컴포넌트

• 컴포넌트 보는 방법

// 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
import React from "react";


const App = () =>{
    // 자바스크립트를 쓸 수 있는 영역

return(
    <div>
    {/* JSX를 쓸 수 있는 영역 */
    </div>}
)
}
// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default App;

주의사항

• 컴포넌트 이름은 반드시 첫글자 대문자
• 폴더는 소문자로 시작하는 카멜케이스

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const handleClick = () => {
    alert("안녕하세요!");
  };
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {}
      <span>이것은 제가 만든 App 컴포넌트 입니다.</span>
      <button onClick={handleClick}>클릭!</button>
    </div>
  );
}

export default App;

연결하는 방법

//할아버지, 엄마, 자식

function App() {
  return (
    <div>
      안녕하세요!
      <Grandfa />
      <Mother />
      <Child />
    </div>
  );
}

export default App;

function Grandfa() {
  return <div>할아버지</div>;
}

function Mother() {
  return <div className="mother">엄마</div>;
}

function Child() {
  return <div>나는 자식입니다.</div>;
}

JSX

:리액트 문법

• 자바스크립트 문법이지만 HTML을 가지고 있다.

• JSX 에서의

  는 정확히는 React요소이다.

• rafce

JSX 문법

1. return 문 이하에 하나의 문법만 있어야 한다.
   <> </> 로도 사용가능
2. 위에 변수 선언 후 아래에서 {}중괄호를 통해 변수 사용 가능
3. className 으로 class이름 지정해야한다.
4. 인라인 스타일을 지정할 때 자바스크립트 요소가 들어가야해서 {}한번 객체 요소가 들어가야 하기 때문에 안에 {}를 한번 더 써주어야 한다.

import React from "react";

const App = () => {
  const NUMBER = 1000;
  const pTagStyle = {
    color: "orange",
  };
  return (
    <>
      <div>
        <input type="text" />
        <button>{NUMBER}</button>
        <p style={pTagStyle}>sdfdsf</p>
      </div>
    </>
  );
};
export default App;

props

1. 컴포넌트 끼리의 정보교환 방식
   : 부모에서 자식으로 데이터를 전달할 때 사용한다.

• 반드시 위에서 아래로만 간다. 부모 => 자식으로만
• 반드시 읽기 전용으로 취급 변경할 수 없다.

//프랍 드릴링

// src/App.jsx

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name = "르탄이";
  return <Mother name={name} />;
}

function Mother(props) {
  const name = props.name;
  return <Child name={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {
  const name = props.name;
  return <div>{name}</div>;
}

export default App;

Children

• Layout 컴포넌트를 만들 때 주로 사용

// src/About.jsx

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (
    <Layout>
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

function Layout(props) {
  const children = props.children;
  return (
    <main>
      <header></header>
      {children}
      <footer></footer>
    </main>
  );
}

구조분해할당

import React from "react";

const App = () => {
  const title = "재목";
  return (
    <div>
      <h1>추출테스트</h1>
      <Todo title={title} />
    </div>
  );
};
const Todo = ({ title }) => {
  return (
    <div>
      <h3>{title}</h3>
      투두입니다.
    </div>
  );
};
export default App;

State

// 바꿀변수를 이용하여 값을 바꿔준다음 변수를 활용
// 제어 컴포넌트를 쓰는 것이 좋다.
const [변수, 바꿀변수] = useState()

import React from "react";

const App = () => {
  const [text, setText] = useState("");
  const handleInputChange = (event) => {
    setText(event.target.value);
  };
  console.log(text);
  return (
    <div>
      <input type="text" onChange={handleInputChange} value={text} />
      {text}
    </div>
  );
};

export default App;

불변성

: 메모리에 있는 값을 변경할 수 없는 것

불변성을 깨뜨리는 것이 문제가 되는 이유

1. 예측 불가능한 코드가 된다.
2. 버그 추적이 어렵다.
   Spread Operator를 이용하여 불변성을 유지시켜라
   [...numbers]

• 리액트에서는 화면을 리레더링 할 지 말지 state변화를 확인한다.
• 리액트는 값이 바뀌었는지를 메모리 주소로 확인하기 때문에 값이 바뀌었는지 안 바뀌었는지 알 수 없다.

컴포넌트 및 렌더링

1. 컴포넌트

• 조각들. UI 구축 작업을 쉽게 만들어줌
• UI 요소를 표현하는 최소한의 단위

1-1. 리액트(선언형프로그래밍)

• 추상화되어 있다.

2. 렌더링
   : 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할 지 컴포넌트에게 요청하는 작업을 의미한다.

3. 렌더링을 일으킨다. (triggering)

4. 렌더링을 한다.(rendering)

5. 렌더링 결과 (commit)

렌더링 트리거

1. 처음 리액트 앱을 실행했을 때
2. 컴포넌트 내부 state가 변경되었을 때
3. 컴포넌트에 새로운 props가 들어올 때
4. 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 떄

리렌더링

: 새로운 요청사항이 들어오는 것

브라우저렌더링과 리액트 렌더링

: 두가지는 다른 것이며 렌더링이 완료된 이후에 리액트렌더링이 일어난다. 이 프로세스를 브라우저 렌더링이라고 이야기하며 혼동을 피하기 위해서 페인팅이라고도 한다.

DOM과 Virtual DOM(가상돔)

리엑트나 뷰는 가상돔을 사용해서 원하는 화면에 브라우저를 그려줌
자체적으로 효율적인 알고리즘을 사용해서 그리기 때문에 속도가 훨씬 빠르다.

DOM (Document Object Model)

API : HTML요소에 접근해서 수정할 수 있는 함수

Virtual Dom (가상돔)

실제돔과 가상돔은 거의 동일한 형태를 가지게 된다
실제 DOM은 아니지만 객체 형태로 메모리에 저장되기 때문에 실제 DOM에 저장하는 것보다 훨씬 빠르게 조작을 수행할 수 있다.

리액트의 2가지 가상 DOM

1. 화면을 갱신하기 전 구조가 담겨있는 객체
2. 화면 갱신 후 보여야 할 가상 DOM의 객체

diffing(디핑)

: 차이를 검토하는 순서
원래가지고 있는 곳과 변경된 부뿐의 변화를 파악

재조정 (reconciliation)

• Batch Update 바뀐 부분만1 한꺼번에 모아 바꾸어줌

브라우저 렌더링 (페인팅)

1. 가상 DOM생성
2. 차이 비교(Diffing)
3. 배치 업데이트
4. 브라우저 렌더링(페인팅)

• 스타일 계산
• 레이아웃
• 레이아웃 단계에서 계산된 정보를 바탕으로 요소를 화면에 그림