공부기록용

🔴DOM 🔴Virtual DOM 가상돔 리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려준다. 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 상당하다. DOM(Document Object Model) 페이지를 문서(document)라고 하구요. 페이지를 이루는 컴포넌트를 엘리먼트(element)라고한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다. 트리의 요소 하나하나를 ‘노드’라고 하며, 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다. 💫 API - HTML 요소에 접근해서 수정할 수 있는 함수로 이해하기 가상DOM(Virtual D..

LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 이해하기(우리는 클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용) 생명주기(LifeCycle) 리액트 컴포넌트는 각각 [Mount] → [Update] → [Unmount]의 과정을 거친다. 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보시면 된다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있다. Mount 컴포넌트가 생성될 때를 말한다. constructor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자_역할이 필요한 경우 여기에 적어준다. getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트..

🔴React.memo_component 🔴useCallback_함수 🔴useMemo_value 💫리-렌더링의 발생 조건 🔻컴포넌트에서 state가 바뀌었을 때 🔻컴포넌트가 내려받은 props가 변경되었을 때 🔻부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 💫리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법 🔻memo(React.memo) : 컴포넌트를 캐싱 🔻useCallback : 함수를 캐싱 🔻useMemo : 값을 캐싱 // App.jsx import React, { useState } from 'react' import Box1 from './components/Box1'; import Box2 from './components/Box2'; import Box3 fr..

useContext 많은 props로 prop drilling이 너무 깊어지면 유지 보수 및 오류 파악이 힘들어 진다. 그래서 prop drilling이 되는 것 대신에 context API를 사용하게 되는데, useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 된다. 💫context API 필수 개념 createContext : context 객체를 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) prop drilling // App.js import React from 'react' import GrandFather from './components/GrandFather' function App() { return } ..

🔴useRef 🔴useRef는 2가지 용도 🔴state와 ref의 차이점 💫저장공간으로서의 useRef, DOM요소 접근 방법으로서의 useRef useRef DOM 요소에 접근할 수 있도록 하는 React Hook, 리액트에서도 DOM을 선택해야 할 상황이 생기고 그때 사용한다. ref : reference_어떤 것의 참조 정도로 이해하기 const 변수 = useRef("초기값"); import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( ); } export default App; ref로 선언해 놓은 값에 접근해서 값을 바꿔..

🔴useEffect 🔴의존성 배열(dependency array) 🔴clean up useEffect 💫useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook import './App.css'; import { useEffect, useState } from 'react'; function App() { const [value, setValue] = useState(""); // 함수가 실행될때 렌더링 되는 useEffect // 그래서 input값이 입력될때마다 계속 console가 찍히는 것이다. useEffect(() => { console.log("useEffect") }); return ( { setValue(event.target.value); }..