[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

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

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

[JS] 단축평가 (||, &&, ?., ??)

논리합연산자 ( || )논리합 연산자를 활용해 기본값을 설정할 수 있다.if-else 혹은 삼항연산자 등을 활용하는 경우를 훨씬 간단하게 표현할 수 있다는 것!const person = { age: 30,};const getUserName = (user) => { return user.name || "신원미상";};const getUserName2 = (user) => { if(!user.name) return "신원미상"; else return user.name;};  논리곱연산자 ( && )특정 조건이 성립할 때 수행할 내용을 지정해줄 수 있다.const loggedIn = true;const userName = "르탄이";loggedIn && console.log(`환영합니다. ${userN..

• format_list_bulleted JavaScript
• · 2024. 8. 8.
• textsms

[JS] Destructuring, Spread Operator, Rest Operator

Destructuring객체객체 내부의 요소들을 쪼개서 사용할 수 있다 const person = { name: "르순이", age: 28,};function greet({age, name}) { console.log(`안녕하세요. 제 이름은 ${name}이고, ${age}살 입니다.`);}greet(person);위처럼 사용하는 경우 객체 내부에서 요소의 순서와 분해된 순서가 달라지면 영향이 있지 않을까 생각할 수 있지만, key의 이름과 일치하는 변수에 할당되므로 영향 없다! 객체 Destructuring 사용 예시const movie = { title: "Inception", // 생략};const { title } = movie; // "Inception"// --------------..

• format_list_bulleted JavaScript
• · 2024. 8. 8.
• textsms