SSR 서버가 웹 화면을 그리는 주체가 된다. 관련 프레임워크 ex) Next.js, Flask Static Sites 방식에 영감을 얻어 SSR방식이 도입된다. 서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다. 클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다. 통신 과정 사용자가 클라이언트에 요청을 보냄 서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성 클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링 이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태 클라이언트가 J..

글의 목적 state를 공부하다 보니 비동기처리 시 state가 어떻게 동작하는지가 궁금해졌다. 따라서 React가 state를 처리하는 과정을 알아보게 되었다. 이 글은 모두 공식 문서에 명시된 내용만 참고해 적었다.   State는 스냅샷리액트를 공부 중이라면 state를 바꾸면 컴포넌트가 리렌더링이 된다는 것을 알고 있을 것이다. 이때 렌더링의 개념을 이해하는 것이 중요하다.  렌더링이란, react가 컴포넌트를 호출한다는 뜻이다. 이 컴포넌트가 반환하는 것은 당시의 화면 스냅숏이다.쉽게 생각해 당시의 상태를 사진으로 찍어둔다고 이해하면 된다. 렌더링시의 변수 등의 값이다. prop, 이벤트 핸들러, 로컬 변수는 모두 렌더링 당시의 state를 이용해서 계산된다.  1. react가 함수를 다시 호..

리액트에서는 배열을 렌더링 시 배열 요소의 고유한 key값을 통해 컴포넌트의 변화를 빠르게 식별하고 파악하는 것을 돕는다. key값을 설정해주지 않으면 리액트 자체적으로 error를 발생시키는데 이는 key 값을 설정해주지 않았을 때 발생하는 부작용을 막기 위해서이다. 예를 들어 다음과 같은 배열이 있다고 해보자 const list = [1, 2]; 이 배열의 맨 앞에 3을 추가해보자. list = [3, 1, 2]; 가장 효율적으로 배열을 수정하는 방법은 맨 앞에 3을 추가해 주는 방법일 것이다. 그러나 리액트 DOM이 렌더링 될 때는 이전 virtual dom과 변화가 일어난 후의 virtual dom을 비교하므로, 즉 변화한 부분을 비교하므로 1번이 3번으로 바뀐 것인지, 3이 맨 앞에 추가된 것인..

글을 쓰게 된 이유 react 개발을 하면서 항상 부딪혔던 문제는 return의 JSX 내용을 어떻게 component body으로 가져올 수 있을까였다. return문의 DOM 요소에 따라 다른 본문을 작성하고 싶은데.. 따라서 해결 방법을 정리해보려 글을 쓴다. 문제 상황 이 코드에서 handleClick의 주석이 달린 부분을 작성하고 싶다. 해결 방법 멘탈 모델 자체가 'return을 본문으로 끌어오기'가 아니라 '본문의 JS 코드를 return 안으로 가져가기'가 되어야 한다. 일반적으로 react 함수형 컴포넌트에서는 component body에는 JavaScript 구문을, return에는 JSX 문법을 사용하게 된다. 이때 return문 안에는 JavaScript 코드를 작성해도 프로그램이 ..

real DOM vs virtual DOM real DOM 브라우저에서 웹 페이지를 렌더링할 때 사용하는 트리 구조로, HTML 요소와 그 속성, 텍스트 등을 나타낸다. 실제 DOM을 조작하면 웹 페이지가 다시 그려지고 업데이트되는데, 이 과정이 비교적 비용이 크다. Virtual DOM React에서는 UI를 표현하는 가상의 DOM 트리를 생성한다. 이는 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 적용되지 않고 메모리 상에 존재한다. 렌더링 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듦 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듦 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 ..