코드를 위한 기록

6.1 리액트 개발 도구란?리액트 애플리케이션 디버깅을 위한 리액트 개발 도구 react-dev-tools 6.2 리액트 개발 도구 설치사용 방법은 여러가지가 있지만 웹 개발에서는 확장 프로그램을 사용하는 것이 가장 편리- 크롬- 파이어폭스- 엣지 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지인 경우, 리액트로 개발된 페이지가 아닌 경우리액트 개발 도구가 정상적으로 접근할 수 있는 경우 6.3 리액트 개발 도구 활용하기6.3.1 Components컴포넌트 트리, 컴포넌트에 대한 자세한 정보(props, hooks 등) 컴포넌트명(압축 도구로 인해 난수화될 수 있어 개발 모드에서 제한적으로 참고)익명 함수인 경우 Anonymous, _default, _c3, _c5 등 컴포넌트 특정이 어려움- 기..

5.2.4 상태 관리 라이브러리Recoil최소 상태 개념 Atom 제시 애플리케이션 최상단에 RecoilRoot로 스토어(Context)를 생성값이 변경되면 이를 참조(구독)하고 있는 하위 컴포넌트에 알림atom은 식별자가 될 유일한 key와 초기값 default를 받음useRecoilValue(useRecoilValueLoadable) 외부의 값을 구독해 렌더링을 강제로 일으킴(forceUpdate) 동시성 렌더링, 서버 컴포넌트, Streaming SSR 등이 지원되기 전까지는 1.0.0을 릴리즈하지 않을 것이라 함 메타팀에서 개발하기 때문에 리액트 업데이트(기능)에 잘 대응할 것이라는 기대초기 버전이기 때문에 불안정하다는 우려-> 2025.01 지원 종료 JotaiRecoil atom 모델에 영감받..

5.1 상태 관리는 왜 필요한가?상태: 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값- UI: 상호 작용이 가능한 모든 요소의 현재 값(다크/라이트 모드, input, 알림창 노출 여부)- URL: 브라우저에서 관리되는 상태값(route params, query)- form: loading, submit, disabled, validation- 서버에서 가져온 값(API 요청) 5.1.1 리액트 상태 관리의 역사기존에 사용되던 MVC 패턴은 모델과 뷰가 많아질수록 복잡도가 증가함→ 상태 변화 추적이 어려움 페이스북 팀은 양방향 데이터 바인딩을 원인으로 봄단방향 데이터 흐름을 제안 Flux 패턴의 등장장점: 데이터 흐름 추적이 쉽고 코드 이해가 쉬워짐단점: 사용자 인터렉션에 따른 데이터 갱신..

서버 사이드 렌더링까지 지원하는 리액트 애플리케이션을 만드는 데 많은 노력이 필요하며, 리액트 팀에서도 권하지 않음 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..

1.6 리액트에서 자주 사용하는 자바스크립트 문법객체 조작, 객체의 얕은 동등 비교 문제를 피하기 위한 객체 분해 할당 등 바벨: 최신 문법을 다양한 브라우저에서 일관적으로 지원할 수 있도록 코드를 트랜스파일트랜스파일의 결과로 어떤 코드가 생성되는지 이해하면 애플리케이션을 디버깅하는데 도움됨 1.6.1 구조 분해 할당배열 구조 분해 할당useState가 배열을 반환하는 이유는 이름을 자유롭게 선언하여 사용하기 위함값이 undefined일 때만 기본값을 사용const array = [1, 2, 3, 4, 5];const [first, second, third, ...arrayRest] = array;// 배열 구조 분해 할당 트랜스파일var array = [a, 2, 3, 4, 5];var first = ..

1.1 자바스크립트의 동등 비교1.1.4 리액트에서의 동등 비교Object.is를 기반으로 shallowEqual이라는 함수를 만들어 사용리액트에서 사용하는 JSX props 객체를 비교하기 위함Object.is로 비교 수행객체 1 depth 비교(얕은 비교) 수행props에 객체를 넘긴다면 렌더링이 예상치 못하게 작동메모이제이션(useMemo, useCallback, React.memo)를 올바르게 사용하기 위해 고려 필요 1.2 함수함수 네이밍useEffect나 useCallback 등의 훅의 콜백 함수에 네이밍을 한다면 디버깅에 도움받을 수 있음useEffect(function apiRequest() { ...}, []); 1.3 클래스정적 메서드정적 메서드 내부의 this는 인스턴스가 아닌 클래..