잼굴 코딩공장

Virtual Dom(가상 DOM) 가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다. ..? 우선 가상 DOM을 이해하기 위해서 DOM이 뭔지 부터, 브라우저 렌더링 과정을 알아야 한다. https://jamgul.tistory.com/76 브라우저 렌더링을.araboja 브라우저 렌더링 과정을 이해하기 위해서 먼저 웹 브라우저의 구조를 알아야한다. 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버 jamgul.tistory.com 요약 브라우저가 렌더링할때, HTML파일과 CSS파일을 DOM으로 만들고, 그걸 화면에 어떻게 출력할지 계산..

컴포넌트 성능 최적화의 대표적인 방법에 useMemo와 useCallback이 있다. useMemo 훅에 대해 알아보자 1. useMemo란? 여기서 Memo는 Memoization을 뜻한다. Memoization이란 동일한 값을 리턴하는 함수를 반복적으로 호출해야한다면 맨처음값을 계산할때 해당값을 메모리에 저장해서 필요할때마다 계산하지않고 메모리에서 꺼내쓰는것이다. 자주 필요한값을 캐싱을 해둬서 캐시에서 꺼내 쓴다는 느낌 함수형 컴포넌트는 함수이다. 함수형 컴포넌트를 렌더링 한다 = 함수를 호출한다. => 모든 내부 변수가 초기화 된다. 그렇다고 남용하면 성능이 안좋아질수도 있다. 무거운거만 따로 메모리에 저장해두는거라 별 필요없는거까지 해두면 성능 그닥~~ 2. useMemo의 구조 const val..

언제 쓰나? 1. 렌더링을 발생시키지 말아야하는 값을 다룰때 편리하다 어떤 값을 저장하는 저장공간으로 사용된다. State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화됨. 원하지 않는 랜더링이 될때가있다. Ref가 변화하면 렌더링이 일어나지 않아서 변수들의 값이 유지된다. State의 변화가 일어나서 렌덜이이 되어도 Ref의 값은 유지된다. 2. Ref를 통해서 Dom요소에 접근할수있다. 일단 제일 중요한건 Ref는 렌더링 되지않는다이다. 간단하게 카운트 버튼으로 설명해 본다 import React, { useState, useRef } from 'react' import '../Pages/test.css' const Test = () => { const [count,setCount] = use..

리덕스툴킷을 이해하기 위해서는 리덕스가 어떤건지는 알아야한다. 리덕스란? 리액트의 상태관리 라이브러리이다. 리액트는 단방향데이터 바인딩이기 때문에 상태관리가 까다롭다. props drilling을 사용하거나 context등 상태관리 방법에는 여러가지가 있지만 리덕스를 활용하면 Store라는 공간에 모든 State를 때려박고 꺼내쓰면 되기때문에 전역상태관리가 간편해진다. 다만 리덕스를 사용하게 되면 코드가 복잡해지고 코드량이 많아지기때문에 소규모 프로젝트에서 사용하는것보다 주로 큰단위 프로젝트에서 사용한다. 리덕스 기본용어 Store 컴포넌트 상태를 관리하는 저장소. Action 스토어의 상태를 변경하려면 액션을 생성해야한다. 액션은 객체이고 반드시 type을 가져야한다. 액션 객체는 액션 생성함수에 의해..

Axios 설치 npm install axios axios를 사용하여 데이터 받아오기 const Home = () => { const [item,setItem] = useState([]); useEffect(()=>{ axios.get('https://openmarket.weniv.co.kr/products/') .then((data)=>{console.log(data.data.results) }) .catch(()=>{console.log('실패!')}) }) useEffect를 사용하여 렌더링 할 때 axios로 상품 데이터를 받아옵니다. axios에서 사용할수있는 요청은 4가지입니다. GET: 데이터 조회 POST : 데이터 등록 및 전송 PUT : 데이터 수정 DELETE : 데이터 삭제 지금 해..

1. 렌더링 순서이슈 const Login = () => { async function login() { const email = document.querySelector("#email").value const password = document.querySelector("#pw").value const url = "#"; const reqPath ="/user/login"; const loginData = { "user":{ "email": email, "password": password } } const res = await fetch(url+reqPath,{ method:"POST", headers:{ "Content-type" : "application/json" }, body:JSON.stri..