FE/리뷰

리액트 개발 도구란?리액트 팀은 리액트 애플리케이션의 원활한 개발을 위한 개발 도구인 react-dev-tools를 만들어 제공함리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어짐브라우저 확장 프로그램을 사용해 사용할 수 있음 Components 탭리액트 애플리케이션의 컴포넌트 트리 확인 가능컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보 확인 가능정보컴포넌트 트리해당 리액트 페이지의 컴포넌트 트리를 나타냄기명 함수로 선언된 컴포넌트는 해당 컴포넌트명을, 익명 함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여줌명확하게 컴포넌트를 확인하려면 기명 함수로 선언하는 것이 개발 도구에서 확인하는 데 많은 도움을 줌혹은 displayName 속성을 추가할 수 ..

useState와 useReduceruseState 여러 컴포넌트에 걸쳐 손쉽게 동일한 인터페이스의 상태를 생성하고 관리할 수 잇게 됨useReduceruseState는 useReducer로 구현이 된 훅임두 개의 훅 모두 만들기에 따라 재사용할 수 있는 지역 상태를 만들어 주지만 이는 지역 상태라는 한계 때문에 여러 컴포넌트에 걸쳐 공유하기 위해서는 컴포넌트 트리를 재설계 하는 등의 수고로움이 필요함  Recoil리액트를 만든 페이스북에서 만든 리액트를 위한 상태 관리 라이브러리최소 상태 개념인 Atom을 처음 리액트 생테계에서 선보임실제 프로덕션에 사용하기에는 안정성, 성능, 사용성을 보장할 수 없음Recoil의 상태값은 RecoilRoot로 생성된 Context의 스토어에 저장됨스토어의 상태값에 접..

웹 애플리케이션에서의 상태UI상호 작용이 가능한 모든 요소의 현재 값다크/라이트 모드, 라디오를 비롯한 각종 input, 알림창의 노출 여부 등URL브라우저에서 관리되고 있는 상태 값form로딩 중인지, 현재 제출됐는지, 접근이 불가능한지, 값이 유효한지 모두 상태로관리서버에서 가져온 값클라이언트에서 서버로 요청을 통해 가져온 값API 요청  상태 관리가 왜 필요한지애플리케이션 전체적으로 간리해야 할 상태가 있을 때상태를 어디에 둘 것인지(전역 변수 혹은 별도의 클로저)상태가 유효한 범위는 어떻게 제한할지상태의 변화에 따라 변경돼야 하는 자식 요소들은 어떻게 이 상태의 변화를 감지할 것인지ㅏ상태 변화가 일어남에 따라 즉각적으로 모든 요소들이 변경되어 애플리케이션이 찢어지는 현상을 어떻게 방지할지 리액트 ..

Next.jsVercel에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 프레임워크리액트 서버 사이드 렌더링의 대명사create-next-app으로 프로젝트 생성 가능  package.json프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함next : Next.js의 기반이 되는 패키지eslint-config-next Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint 설정구글과 협업해 만든 핵심 웹 지표에 도움이 되는 규칙들이 내장됨  next.config.jsNext.js 프로젝트의 환경 설정 담당reactStrictMode리액트의 엄격 모드와 관련된 옵션리액트 애플리케이션 내부에서 잠재적인 문제를 개발자에게 알리기 위한 도구swcMinifyvercel에서 SWC라고 불리..

리액트 API리액트는 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공함react-dom/server.js에서 확인 할 수 있음 renderToString인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수서버 사이드 렌더링을 구현하는 데 가장 기초적인 API먼저 완성된 HTML을 서버에서 제공할 수 있으므로 초기 렌더링에서 뛰어난 성능일 보임import React, { useEffect } from "react"import ReactDOMServer from 'react-dom/server'function ChilrenComponent({fruits} : {fruits: Array}) { useEffect(() => { console.log(fruits); ..

싱글 페이지 애플리케이션(SPA, Single Page Application)렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState, history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리함사이트 렌더링에 필요한 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링함페이지 전환 시에는 새로운 HTML을 요청하는 것이 아니라 자바스크립트에서 다음 페이지 렌더링에 필요한 정보만 HTTP 요청 등으로 가져온 다음, 그 결과를 바탕으로..

사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용리액트 훅을 기반으로 개발자가 필요한 훅을 만드는 기법반드시 use로 시작하는 함수명이여야 함import { useEffect, useState } from "react";function useFetch( url: string, { method, body } : { method: string; body?: XMLHttpRequestBodyInit },) { const [result, setResult] = useState() const [isLoading, setIsLoding] = useState(false) const [ok, setOk] = useState() const [status,..

리액트 훅클래스 컴포넌트에서만 가능했던 state, ref 등 리액트의 핵심적인 기능을 함수에서도 가능하게 만듦클래스 컴포넌트보다 간결하게 작성 가능  useState함수 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅인수로 사용할 state의 초깃값을 넘겨줌반환 값은 배열이며, 배열의 첫 번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있음리액트는 클로저를 이용해 setState 함수의 실행이 종료된 이후에도 지역변수인 state를 계속 참조할 수 있게 함  게으른 초기화useState의 인수로 특정한 값을 넘기는 함수를 인수로 넣어줄 수 있음useState에 변수 대신 함수를 넘기는 것을 게으른 초기화라..