서버 사이드 렌더링까지 지원하는 리액트 애플리케이션을 만드는 데 많은 노력이 필요하며, 리액트 팀에서도 권하지 않음 4.3.1 Next.js란?Vercel에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 서버 사이드 렌더링 프레임워크PHP의 대용품으로 사용하기 위해 만듦 4.3.2 Next.js 시작하기create-next-app 기반npx create-next-app@latest --ts next.config.js/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, swcMinify: true,}module.exports = nextConfig주석: 자바스크립트 파일에 타입스크립트의 타입 도..
4.1 서버 사이드 렌더링이란4.1.1 싱글 페이지 애플리케이션렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초 페이지(html)에서 데이터를 불러오고 페이지 전환은 자바스크립트와 브라우저의 history.pushState, history.replaceState로 이루어짐최초에 로딩해야 할 자바스크립트 리소스가 크지만 한 번 로딩된 이후에는 서버를 거쳐 리소스를 받아올 일이 적기 때문에 UIUX 측면에서 장점 싱글 페이지 렌더링 방식의 유행과거 PHP, JSP를 기반으로 웹 애플리케이션이 만들어졌을 때는 대부분의 렌더링이 서버 사이드에서 이뤄짐- 자바스크립트는 보조적인 수단이었음 자바스크립트가 다양한 작업을 수행하게 되면서 자바스크립트 모듈화 방안이 논의됨 ..
함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 하기 위해 훅(hook)이 추가됨 3.1.1 useState상태 정의, 상태 관리 리액트에서 렌더링함수 컴포넌트의 return과 클래스 컴포넌트의 render 함수를 실행한 다음실행 결과를 이전의 리액트 트리와 비교해 리렌더링이 필요한 부분만 업데이트 함수 컴포넌트에서 지역 변수로 값을 다룰 때 렌더링되지 않는 이유: 렌더링이 발생될 때마다 함수는 새롭게 실행되고 지역 변수가 항상 초기화되기 때문 useState는 클로저로 구현되어 있음(함수의 실행이 종료된 이후에도 지역변수인 state를 계속 참조)const MyReact = (function () { const global = {} let index = 0..
2.3 클래스 컴포넌트와 함수 컴포넌트함수 컴포넌트는 0.14 버전부터 존재했으나 정적 렌더링을 목적으로한 무상태 함수 컴포넌트였음16.8 버전에서 훅이 소개된 이후 많이 사용하게 됨 2.3.1 클래스 컴포넌트import React from 'react'// props 타입 선언interface SampleProps { required?: boolean text: string}// state 타입 선언interface SampleState { count: number isLimited?: boolean}class SampleComponent extends React.Component { // constructor에서 props를 넘기고, state의 기본값 설정 private construct..
2.1 JSX리액트가 등장하면서 페이스북(메타)에서 소개한 새로운 구문리액트에 종속적이지 않은 독자적은 문법자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는데 도움을 주는 문법 자바스크립트 표준이 아니기 때문에 자바스크립트 런타임이 이해할 수 있도록 트랜스파일 과정 필요 2.1.1 JSX 정의JSXElement: JSX 구성 기본 요소. HTML element와 비슷- JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment JSXElementName: JSXElement의 요소 이름으로 쓸 수 있는 것- JSXIdentifier: 자바스크립트 식별자 규칙과 동일- JSXNamespacedName: JS..