한우의 개발일기

서버사이드 렌더링(SSR)서버사이드 랜더링이란?서버사이드 렌더링(SSR) 은 사용자에게 최초에 보여질 페이지를 서버에서 랜더링해 빠르게 사용자에게 화면을 보여주는 방식을 말한다.SSR은 서버에서의 렌더링을 마치고, 데이터가 결합된 HTML파일을 내려주는 방식이다. 새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에, 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있다.동작 방식서버에서 완전한 HTML 생성클라이언트에 완성된 HTML 전달브라우저는 받은 HTML을 즉시 렌더링JavaScript 로드 후 이벤트 핸들러 부착싱글 페이지 어플리케이션(SPA)SPA 란?SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다. 서버에서 ..

커스텀 훅과 고차 컴포넌트는 무엇일까?리액트로 개발을 하다보면 효율적인 코드관리를 위하여 따로 hook 을 분리를 하거나 컴포넌트를 분리를 하는 경우가 매우 자주 있을것이다.이때, 커스텀 훅 혹은 고차 컴포넌트로 분리를 할 수 있는데 커스텀 훅과 고차 컴포넌트는 무엇일까??커스텀 훅사용자 정의 훅 혹은 커스텀 훅이라고 불리는 이 커스텀 훅 이라는건 정확히 무엇일까??리액트 hook의 기본 원칙훅의 이름만 use로 시작합니다. 이를 통해 use로 시작하면 hook이구나 바로 알 수 있죠훅을 사용할 수 있는 곳은, 함수 컴포넌트 내부 또는 custom hook 내부에서만 사용할 수 있습니다.hook의 이름을 직접 지정해줄 수 있으므로, 사용하기에 따라 가독성을 좋게 만들어주기도 합니다.예시import { u..

리액트에서의 렌더링컴포넌트 함수가 호출되서 VDOM에 반영되는것.(더 간단하게는 컴포넌트 함수가 호출되는것 -> 어차피 return을 통해 VDOM에 반영되니까)리렌더링이란?Render Phase vs Commit phase간단하게 얘기를 하자면 리액트에서 VDOM에 컴포넌트가 렌더링이 되고 state 같은것들이 바뀌면 새롭게 VDOM 생기면서 렌더링을 해줍니다그때 Render Phase에서 DOM 트리를 순회하면서 변경된 부분을 비교합니다.달라졌다면 그때 체크(더티체크)를 하고 달라진걸 비교해서 재조정을 합니다.이때 실제 브라우저에 적용을합니다. 이때 전체 트리를 적용하는게 아닌 달라진 부분만을 RealDOM 에 적용을 합니다.이 달라진걸 적용을하는것을 CommitPhase 라고 합니다.이때 달라졌다라..