React

https://codesmoothie.tistory.com/30 [React] Render의 진짜 의미와 동작 원리 https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이 codesmoothie.tistory.com 지난 포스팅 '[React] Render의 진짜 의미와 동작 원리'에서 연결되는 글입니다. State의 메카니즘(Mechanics)에 대한 잘못된 상식 React에서 랜더링이 어떻게 동작하는지 알기 전에 먼저 State의 메카니즘에 대해서 알아보자. 일반적으로 화..

https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tre codesmoothie.tistory.com 해당 글은 "[React] Component가 Instance, Element로 변화는 과정" 포스팅에서 연장되는 글입니다. 이해되지 않는 개념이 있다면 앞선 블로그를 정독하는 것을 권장합니다. 학습 영역 지난 포스팅에서 Component와 인스턴스 생성 그리고 그것이 화면의 UI로 ..

Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tree를 구성하게 된다. 일반적으로 JSX 문법으로 이러한 element를 작성하게 된다. 컴포넌트는 청사진 또는 템플릿에 가깝다. 하나의 템플릿(컴포넌트)으로 리엑트는 1개 또는 그 이상의 컴포넌트 인스턴스를 생성할 수 있다. Component Instance React는 컴포넌트를 사용할 때 인스턴스를 생성한다. 만약, Tab이라는 컴포넌트를 1번 정의하고, 3번 사용했다면 컴포넌트 트리에 3개의 인스턴스 트리를 구성하게 된다. 즉, 컴포넌트 인스턴스는 함수로 작성한 코드..

NextJS vs 순수 React 페이지 소스코드 비교 NextJS 14 프로젝트를 생성하고 'npm run dev'로 실행해보자. 그 후 페이지 소스를 확인해보면 아래의 스크린샷과 같이 실제 소스 콘텐츠를 볼 수 있다. 이는 화면에 표시는 정보가 그대로 NextJS에 나타난 다는 것이다. 하지만, 순수 React 앱에서는 이렇게 나오지 않는다. CRA 후 소스코드를 검사해보면 아래와 같이 빈 페이지와 스크립트만 나오며 실제 콘텐츠를 나타나지 않는다. 이러한 차이점이 발생하는 이유를 알기 위해서는 NextJS와 순수 React간의 랜더링 과정 차이를 이해해야 한다. 순수 React의 랜더링 과정 순수 React는 클라이언트 사이드 랜더링을 활용한다. 즉, React는 클라이언트 사이드 자바스크립트 라이브..