React

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것임Virtual Dom에 대해 이해하기 전, DOM(Document Object Model)에 대한 이해가 필요하다DOM은 객체로 문서 구조를 표현하는 방법으로 XML/HTML로 작성한다DOM은 Tree

일반 HTML DOM 요소에 이름 달 때는 id를 사용하는데, 특정 DOM에 접근할 때 아래와 같은 방식을 사용한다위의 방법을 react에 적용하면 DOM을 랜더링할 때 전역적으로 적용되고, unique 하게 사용되지 않을 수도 있기 때문에 특수한 경우가 아니면 사용을

컴포넌트를 스타일링 할 때는 다양한 방식이 있음일반 CSSCSS Modulestyled-componentsSass그 외CSS를 불러와서 사용할 때 클래스 이름을 \[파일이름]\_\[클래스 이름]\_\[해쉬 값] 형태로 자동 만들어주어 각각의 컴포넌트의 클래스 이름이 중

react 16 버전부터 도입된 개념이다자식 컴포넌트 트리에서 에러가 발생하면 해당 컴포넌트 트리를 깨지는 대신, 이러한 에러의 로그를 남기고 잡아내서 Fallback UI를 보여주는 React 컴포넌트이다쉽게 말해서 리액트에서는 예외 발생 시 모든 컴포넌트가 언마운트

1. install library react 버전 업을 위해 기존 react, react-dom 삭제 후 아래 라이브러리를 설치한다 버전 업을 하고 나면 아래와 같은 에러가 발생한다 2. Error > Warning: ReactDOM.render is no lon

CRA로 프로젝트를 생성하다보면 일부 기본 설정들을 건들여야할 때가 있고, 그 설정들을 건들이기 위해 eject 명령어를 통해 숨겨져 있던 모든 설정들(ex. webpack, babel etc)을 수정할 수 있다하지만 한 번 eject를 수행하면 이전 상태로 되돌아 갈

CRA typescript로 개발하다 css 파일을 모듈로 작성했는데 아래와 같은 에러가 발생했다Cannot find module '@css/components/header.module.css' or its corresponding type declarations.이는

useEffect는 컴포넌트가 렌더링 될 때마다 작업을 실행할 수 있도록 하는 hook이다컴포넌트가 mount(처음 나타났을 때)/unmount/update 됐을 때 각각 특정 작업을 처리할 수 있다이는 클래스형 컴포넌트 라이프 사이클에서 볼 수 있는 component

이 패턴을 사용하면 불필요한 prop drilling 없이 표현적이고 선언적인 컴포넌트를 만들 수 있다하나의 거대한 부모 컴포넌트에 모든 props를 집어넣고 하위 UI 컴포넌트로 내려가는 대신, 각 prop는 가장 적합한 SubComponent에 연결되어 있게 된다.

기본적으로 react project를 빌드할 때 파일의 경로가 절대경로로 지정되어 있다빌드한 파일들을 nginx에 연결해서 사용하려 했는데 static 파일들의 경로를 못찾아서 이슈가 있었다그래서 static 파일들을 상대경로로 인지할 수 있게 빌드를 해야했었다상대경로

목적: React 빌드 결과물을 nginx에 올린다server 블록: 하나의 웹 사이트를 선언하는데 사용됨listen: 포트에 대한 설정location: url이 /abc 가 포함된 경로 설정 (prefix로 설정하거나 정규식으로 매칭할 수 있음)root: 실행할 파일

1. 배경 회사 프로젝트에서 form을 많이 사용하고 있는데 유효성 검사를 할 때 번거로움이 있었다 react hook form을 사용하면 이를 단순화 시킬 수 있으며, 다른 라이브러리에 비해 리랜더링 수가 적고 로딩속도가 빠르다 2. install 3. How T

material ui처럼 반드시 controlled component 형태로 사용하는 라이브러리들이 있는데,이런 컴포넌트들은 등록할 때 register 대신 control이라는 객체를 사용한다또한 Controller라는 wrapper 컴포넌트로 래핑해서 react ho

비동기 통신할 때 intercepter를 사용하는 큰 이유는 유지보수 측면에서 효율적으로 관리할 수 있기 때문이다 (물론 다른 이유도 있겠지만)장점은 아래와 같다api 호출할 때마다 axios 인스턴스를 생성하지 않아도 된다axios 마다 동일한 헤더 값 처리가 가능하

실무하면서 왼쪽 하단에 네비게이션을 달다가 일부 페이지에서는 네비게이션이 없어야하는 상황이 생겼다처음에는 훅스를 이용해서 처리할까 하다가 react-router-dom에 Outlet이라는 속성을 처음봤다특정 페이지들끼리 공통적으로 보여줘야 하는 레이아웃이 있을 때 유용

타입스크립트 cra로 만든 프로젝트에서 window object 확장해야하는 경우가 있었다그럴 땐 react-app-env.d.ts 에 window object를 정의하면 된다react-app-env.d.ts 파일은 typescript 타입 선언을 참조하며, 리소스 파

CRA은 환경변수를 사용하기 위해 dotenv 모듈을 사용하고 있으며, env 파일은 프로젝트 루트에 존재해야한다예시 파일).env 파일은 실행 우선순위가 있다만약 위에 적힌 파일명이 아닌 다른 파일명으로 설정하고자 한다면 스크립트에 해당 환경에 맞는 .env 파일을

VAC(View Asset Component)를 사용하려면 Presentational(only view render) / Container(view 제외 모든 것) 컴포넌트를 도입해야한다VAC는 기존에 존재하던 Presentational/Container 패턴의 별칭일

상태를 바꿔야할 때는 기존 데이터를 변형하는게 아니라 새로운 데이터로 변경해야 한다state가 변경됐는지 알아야 하고값을 수정할 때 바뀐 상태 값이 이전 값과 동일하다면 참조 값이 같아져서 비교할 수가 없다리액트에서는 상태가 변경되면 리랜더링을 하고, 리랜더링 할 때

CRA로 프로젝트를 생성했다면 테스팅 관련 라이브러리가 내장되어있다.→ @testing-library/jest-dom, @testing-library/react, @testing-library/user-eventjest는 기본적으로 test 폴더에 존재하는 파일이나,

리액트는 single page application이라 빌드 파일을 스프링부트에 올리면 새로고침 할 때 실제로 스프링 부트에는 없는 페이지이기 때문에 white label error page 가 뜨는데,이는 스프링 부트 쪽 WebConfig.java 파일을 생성해서 설

지난 주에 회의하다가 import React from "react"; 가 왜 없어졌는지에 대한 얘기가 나왔었는데 정리를 좀 해야할 것 같다브라우저는 html, css, javascript만 읽을 수 있기 때문에 React는 읽지 못한다그렇기 때문에 JSX를 JSX tr

본 글은 러닝 리액트 3장 자바스크립트를 활용한 함수형 프로그래밍 을 정리한 글입니다리액트를 처음에 공부할 때 왜 props는 항상 read-only 인걸까 라는 의문만 갖고 있었지 따로 찾아보지 않은 것 같다.그냥 어느 글을 보더라도 똑같이 부모 컴포넌트에서 내려준

본 글은 러닝 리액트 2판 4장 리액트의 작동 원리 를 정리한 글입니다.React를 브라우저에서 띄우려면 React, ReactDOM 라이브러리를 불러야한다.React: View를 만들기 위한 라이브러리ReactDOM: UI를 실제 브라우저에 렌더링할 때 사용하는 라이

1.배경 이전 회사에서 로그인 쪽 개발을 진행하면서 로그인 정보에 대한 암복호화를 해야되는 경우가 발생했다. 회사에서 백엔드 쪽 권한 솔루션으로 스프링 시큐리티를 사용했는데 로그인 진행할 때 REST 형태로 진행되는 것이 아닌 폼 형태로 진행되기 때문에 폼에 입력한 값

headless ui를 만들어보려 하는데 라이브러리를 까보면 대부분 context api를 사용해서 구현되어 있는 것 같았다. 그래서 headless ui 만드는 김에 context api에 대해 기록하고자 한다.리액트는 상태값을 공유할 때 props로 전달하는데, 간

상태관리 라이브러리 특성상 새로고침하거나 페이지를 닫게 되면 저장된 상태 값이 날라간다.이를 방지하기 위해 recoil 에 따로 설정을 해줘야 한다.많이 보이는 방법 중 하나가 recoil-persist 라이브러리를 사용하는 것이였다.근데 이 라이브러리를 사용하게 되면