[React] Rendering과 Virtual DOM

Rendering렌더링 트리거1) 첫 리액트 앱을 실행했을 때 2) 리액트 내부에서 state 변경이 발생했을 때- 컴포넌트 내부 state가 변경됐을 때- 컴포넌트에 새로운 props가 들어올 때- 상위 부모 컴포넌트에서 위의 두 이유로 렌더링이 발생했을 때 리렌더링- 컴포넌트 상태에 변화가 생길 때 발생- 여러 상태가 변경됐다면 리액트는 큐 자료구조에 넣어 순서를 관리함 브라우저 렌더링- 브라우저 렌더링과 리액트 렌더링은 서로 다른, 독립적인 프로세스- 렌더링이 완료되고 React가 DOM을 업데이트 → 브라우저 렌더링 (or 페인팅) 브라우저 렌더링 (페인팅) 원리React, Vue.js는 가상돔(Virtual DOM)을 이용해 원하는 화면을 브라우저에 그려준다. Virtual DOM 생성리액트는 ..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms

[React] state

리액트에서 자주 변경되고, 변경된 값이 화면에 출력돼야하는 값이 필요할 때 state를 활용할 수 있다. useStatereact hook 이라고 한다. 이 개념은 추후 자세히 알아볼 예정! const test = useState("초기값");// test: [ 변수: "변수값", 변수를 변경할 수 있는 함수: function() {},]// 따라서 아래와같이 사용할 수 있음 (Destructuring)const [name, setName] = useState('Kim');  제어 컴포넌트import { useState } from "react";const App = () => { const [value, setValue] = useState(""); const onChangeHandler = (..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms
[React] props와 children

[React] props와 children

props: 컴포넌트 끼리의 정보 교환 방식 특징1) 위에서 아래 방향(부모 → 자식 방향)으로만 흐른다. (단방향)2) 반드시 읽기전용으로 취급하며 변경하지 않는다. childrenprops와 유사하게 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할 수 있는 방법여는 태그와 닫는 태그 사이에 작성된 값이 자식 컴포넌트의 children이라는 값으로 전달된다. import React from "react";const App = () => { return 안녕하세요!;};function User(props) { return 유저님 {props.children};}export default App; children의 용도1) 레이아웃 컴포넌트를 만들 때 주로 사용import React from "rea..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms

React 프로젝트 생성/구조

CRA (Create React App) 사용1. 터미널에서 yarn 명령어 입력yarn create react-app my-first-react  Vite (비트) 사용하기yarn create vite my-first-vite-react-app --template reactyarn과 달리 --template react 라는 부분이 있다vite는 리액트만을 위해 만들어진 것이 아니므로 어떤 라이브러리/프레임워크를 사용할 것인지 직접 지정해준다 Vite 로 프로젝트 생성한 경우 특징빠른 콜드 스타트, HMR(Hot module replacement) 리액트 프로젝트 구조index.html SPA 리액트 프로젝트의 유일한 html 파일main.jsx에서 UI 요소들을 받아 index.html의 div#roo..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms
SPA (Single Page Application)

SPA (Single Page Application)

MPA와 SSRMPA (Multi Page Application)최초 접속한 페이지 외에도 새롭게 서버가 생성한 페이지가 존재하고, 그것을 불러와 사용하는 경우 SSR (Server Side Rendering)초기화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에 전송하는 방식렌더링: 시각적인 요소들을 그려내는 것이 아니라 HTML 문서 자체를 생성하는 과정서버에서 생성된 HTML이 브라우저로 전송 -> 브라우저가 시각적인 페이지를 표시(브라우저 렌더링)으로 이어짐서버에서의 처리 과정을 통해 초기 페이지 로딩 속도를 향상, 검색 엔진 최적화(SEO)에 유리하게 작용서버에서 사전에 페이지의 주요 내용을 포함시킬 수 있기 때문에 검색 엔진이 페이지 내용을 더 쉽게 인식  SPA (Single ..

  • format_list_bulleted React
  • · 2024. 8. 8.
  • textsms