⚡5.1 상태관리의 필요성상태란 흔히 웹 애플리케이션을 개발할때 이야기하는 상태는 어떠한 의미를 지닌 값이며, 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미함 (UI, URL, form, 서버에서 가져온 값)5.1.1 리액트 상태관리의 역사🌕Flux 패턴 단방향으로 데이터 흐름을 변경하는 것 (양방향 데이터 바인딩 / 코드의 양이 많아지고 변경시나리오가 복잡💡 Flux패턴의 용어action : 어떠한 작업을 처리할 액션과 그 액션이 발생시 함께 포함시킬 데이터를 의미dispatcher : 액션을 스토어로 보내는 역할store : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가짐view : 리액트의 컴포넌트에 해당하는 부분양방향 데이터 바인딩은 데이터 흐름은 모두 액션..

⚡서버 사이드 렌더링 - 4.3 Next.js4.3.1 Next.js란?리액트 기반 프로젝트에서 서버 사이드 렌더링을 고려할때 가장 많이 선택함4.3.2 Next.js 시작하기💡Next.js 프로젝트 만들어보기npx create-next-app@latest --ts프로젝트 생성 후 npm run dev를 통해 접속하면 됨🌕 package.jsonnpm프로젝트를 볼때 package.json을 확인해야 함🌕의존성next : Next.js의 기반이 되는 패키지elint-config-next : Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint설정🌚next.config.js프로젝트의 환경 설정을 담당 pages/_app.tsx : 에러 바운더리를 사용해 애플리케이션 전역에서 발생하는 에러 ..

⚡서버 사이드 렌더링 - 4.2 서버 사이드 랜더링을 위한 리액트 API 살펴보기 Node.js같은 서버환경에서만 실행할 수 있으며, window환경에서 실행 시 에러가 발생할 수 있음리액트에서 서버 사이드 렌더링을 실행할 때 사용되는 API를 확인해 보려면 리액트 저장소의 react-dom/server.js를 확인하면 됨react-dom/server.js에는 react-dom이 서버에서 렌더링하기 위한 다양한 메서드를 제공하고 있음4.2.1 renderToString인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수최초페이지를 빠르게 HTML로 먼저 렌더링 하는 역할클라이언트에서 실행되는 자바스크립트 코드를 포함시키거나 렌더링하는 역할까지 해주지는 않음클라이언트에서 실행되지 않고,..

⚡리액트 핵심요소 깊게 살펴보기 - 3.2 사용자 정의 훅과 고차 컴포넌트 중 뭘 써야할까🌕리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 방법사용자 정의 훅 (custom hook)고차 컴포넌트 (higher order component)3.2.1 사용자 정의 훅 리액트 훅 기반서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할때 사용되는 것 🌕사용자 정의 훅의 규칙use로 시작하는 함수를 만들어야 한다는 것 → use로 시작하는 이름을 가지지 않으면 에러가 발생함 3.2.2 고차 컴포넌트 (HOC, Higher Order Component)고차함수( Higher Order Function )의 일종가장 유명한 고차 컴포넌트는 React.memo컴포넌트 자체의 로직을 재사용하기 위한 방법?..

⚡리액트 핵심요소 깊게 살펴보기 - 3.1 리액트의 모든 훅 파헤치기🌚 훅(hook) 함수형 컴포넌트가 상태를 사용하거나 클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 다양한 작업을 하기 위해 추가됨훅을 사용하면 클래스형 컴포넌트가 아니더라도 리액트의 다양한 기능을 활용할 수 있음 3.1 리액트의 모든 훅 파헤치기 3.1.1 useState함수형 컴포넌트 내부에서 상태를 정의하고 상태를 관리할 수 있게 해주는 훅🌚기본 사용법import {useState} from 'react'const {state, setState} = useState(initialState)useState 인수로는 state의 초기값을 넘겨주는데, 아무런 값을 넘겨주지 않으면 undefined가 초기값임useState 반환값..

⚡리액트 핵심요소 깊게 살펴보기 - 2.5 컴포넌트와 함수의 무거운 연산을 기억해두는 메모이제이션리액트에서 제공하는 API 중 useMemo, useCallback, memo는 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공되는데, 정확히 언제 사용하는 것이 좋을까?2.5.1 주장1 : 섣부른 최적화는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자꼭 필요한 곳을 신중히 골라서 메모이제이션해야 함메모이제이션도 어디까지나 비용이드는 작업이므로 최적화에 대한 비용을 지불할 때는 항상 신중해야 함2.5.2 주장2 : 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션 해버리자리액트는 이전 렌더링 결과를 다음 렌더링과 구별하기 위해 저장해 둬야 하는데, 기본적인 리액트의 재조정 알고리즘이기 때문이전 ..

⚡리액트 핵심요소 깊게 살펴보기 - 2.4 렌더링은 어떻게 일어나는가?리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정이고, 렌더링은 시간과 리소스를 소비해 수행되는 과정이므로 렌더링 과정을 최소한으로 줄이는게 좋음2.4.1 리액트의 렌더링이란?리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state값을 기반으로 어떻게 UI를 구성하고 이를 바탕하고 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정 2.4.2 리액트의 렌더링이 일어나는 이유🌚리액트에서 렌더링이 발생하는 시나리오1. 최초렌더링 : 사용자가 처음 애플리케이션을 진입하면 렌더링해야 할 결과물이 필요한데, 리액트는 브라우저에 해당 정보를 제공하기 위해 최초렌더링..

⚡리액트 핵심 요소 깊게 살펴보기 - 2.3 클래스형 컴포넌트와 함수형 컴포넌트2.3.1 클래스형 컴포넌트 클래스형 컴포넌트를 생성하기 위해서는 클래스를 선언하고 extends로 만들고 싶은 컴포넌트를 extends해야함💡extends 구문에 넣을 수 있는 클래스React.ComponentReact.PureComponent※ 위의 클래스의 차이점은 shouldComponentUpdate를 사용함에 있음🌕 컴포넌트를 생성할때 주로 쓰이는 것 : props, stateimport React from 'react'// props 타입을 선언한다.interface SampleProps { required?: boolean text: string}// state 타입을 선언한다.interface S..

📂 React 설치하는 방법1.Node.js LTS 버전이나 최신 안정 버전을 내려받아 설치하기https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org2. Visual Studio Code 설치https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Stu..

⚡리액트 핵심 요소 깊게 살펴보기 - 2.2 가상 DOM과 리액트 파이버2.2.1 DOM과 브라우저 렌더링 과정🌚 DOM(Document Object Model)웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있음💡브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다. 2. 브라우저의 렌더링 엔진은 HTML을 파싱(해석)해 DOM 노드로 구성된 트리(DOM)를 만든다. 3. 2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다. 4. 브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)을 만든다. 5. 브라우저는 2번에서 만든 ..