React

사용자 인터페이스를 구축하기 위한 Facebook에서 만든 자바스크립트 라이브러리이다.재사용가능한 UI 컴포넌트를 작성하고 이들을 조합하여 복잡한 사용자 인터페이스를 구성하는데 사용된다.또한 가상DOM 을 활용하여 효율적인 UI 업데이트를 가능하게하며단방향 데이터 흐름

리액트는 가상 DOM을 이용해서 바뀐 부분만 실제 돔에 적용한다.고유한 값이 있어야만 바뀐 부분을 찾을 수 있다.이러한 이유로 key를 사용하는 것이다.3번을 1,2번 뒤에 추가할때는 React가 3번 만 추가하면 된다고 알게된다.이 경우 key를 추가해서 1,2번을

컴포넌트에서 관리되는 내부 데이터이다이 값은 사용자의 입력, API 응답 및 시간에 따른 변화 등으로 인해 변경되는 데이터 등이 될 수 있다.React 클래스 컴포넌트는 constructor에서 초기화되며this.state로 접근하고 this.setState() 메서드

React에서 React State는 컴포넌트 내부적으로 가지고 있는 상태 값을 의미한다.React에서 컴포넌트는 이 State 값이 변경되면 해당 컴포넌트는 재랜더링된다.정확히 말하자면 Call Stack에 저장된 값이 변경되어야 컴포넌트 재렌더링이 일어난다.이는 R

파일 > 기본 설정 > 설정Window 이용자 : Ctrl + ,Mac 이용자 : Command + ,작업영역(WorkSpace setting) > 확장 > Emmet > Preferencesetting.json에서 편집 클릭아래 key-value를 삽입한다.setti

버튼을 누를 때마다 6씩 증가해야하는데 1씩 증가한다.React는 퍼포먼스 향상을 위해 특별한 배치프로세스를 사용하기 때문이다.여러 setState 업데이트를 한번에 묶어서 처리한 후 마지막 값을 통해 state를 결정하는 방식이다.setCount()의 파라미터에 콜백

React에서 제공하는 고차 컴포넌트(Higher-Order Component)이다.이를 사용하여 컴포넌트의 리렌더링을 최적화할 수 있다.일반적으로 React 컴포넌트는 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 함께 리렌더링된다. 그러나 자식 컴포넌트가 자체적

React 컴포넌트가 렌더링될 때 그 안에 있는 함수도 다시 만들게 된다.하지만 똑같은 함수를 컴포넌트나 리렌더링 된다고 계속 다시 만드는 것을 비효율적이다.만약 다시 만들어진 함수가 자식 컴포넌트에 prop로 전달된다면React.memo를 사용하더라도 다시 렌더링되게

React에서 제공하는 훅(Hook) 중 하나로, 계산 비용이 많은 연산 결과를 메모이제이션하여 불필요한 연산을 방지하는 데 사용된다.즉, 연산에 필요한 피연산자의 값이 변경되면 그때만 연산을 다시한다.만약 의존성 배열이 비어있다면메모제이션 된 값은 컴포넌트의 생명주

useEffect, useCallback, useMemo 등의존성 배열을 파라미터로 받는 React Hooks은의존성 배열의 모든 값들의 종속성(참조 값)을 비교해서 다르다면 첫번째 파라미터로 받은 함수를 동작시킨다고 한다.실제로 Object.is() 메서드를 사용한다

반복문, 조건문 혹은 중첩 함수에서 hook을 호출하면 안 된다.state는 컴포넌트의 실행 순서대로 배열에 저장된다.만약 조건문 등을 만나면 컴포넌트의 실행 순서가 달라질 수 있다.Hook을 일반적인 JavaScript 함수에서 호출하면 안 된다.함수 컴포넌트, 커스

node_modules/react/cjs/react.development.js 드디어 찾았다.. hook 정복 가보자..

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.npm install axios --save/src 내부에 api 라는 이름의 폴더를 생성한다./

React 애플리케이션에서 컴포넌트 스타일링을 위해 사용되는 CSS-in-JS 라이브러리이다.이 라이브러리를 사용하면 React 컴포넌트와 관련된 스타일을 선언적인 방식으로 작성할 수 있다.npm install --save styled-components<{ $p

Single Page Application 의 약자로말 글대로 하나의 페이지에서 모든 사용자 인터페이슬르 처리하는 웹 어플리케이션을 말한다.사용자가 새로운 페이지에 방문할때마다서버에서 새로운 HTML 파일을 다운 받아야한다.그러나 SPA에서는 초기 페이지 로드 이후 새

Test Driven Development의 약자로실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하고그 테스트 코드를 pass 할 수 있는 실제 코드를 작성하는 과정을 말한다.TDD를 하므로 인해 많은 기능을 테스트하기에 소스코드에 안정감이 부여된다.실제 개발을

React 구성 요소 작을 위한 API 를 추가하여 DOM Testing Library 위에 구축된다.DOM Testing Library 란 DOM 노드(Node)를 테스트하기 위한매우 가벼운 솔루션이다.create-react-app으로 생성된 프로젝트는즉시 React

FaceBook에 의해서 만들어진 테스팅 프레임 워크이다.최소한의 설정으로 동작하며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인한다.단위 테스트를 위해서 이용한다Zero configurationJest는 설정 없이 "박스에서 나와 바로 사용할 수

개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있게 도와주는 라이브러리create-react-app 으로 설치하면 기본적으로 eslint가 설정되어있다.하지만 이 상태로는 VScode에서 바로 확인할 수 없고앱을 실행했을때 터미널에서 볼 수 있다.자바스크립트를

batching 은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서한번의 리렌더링 업데이트가 진행될 수 있는 것을 의미한다.즉, 하나의 함수 안에서 setState를 아무리 많이 호출시키더라도리렌더링은 한번만 발생한다.이 기능은 여러번 리렌더링하는 것을 막기때문

리엑트의 서버 사이드 렌더링은 다음 스텝으로 이뤄진다.1\. 서버에서 전체 앱에 대한 데이터를 가져온다.2\. 서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보낸다.3\. 클라이언트에서 전체 앱에 대한 JavaScript 코드를 로드한다.4\. JavaScript

React 18에서는 업데이트 도중에도 앱의 응답성을 유지하는 데도움이 되는 API를 도입했다.새로운 API를 사용하면 특정 업데이트를 "Transition"으로 표시하여사용자 상호작용을 크게 개선할 수 있다.이 기능은 리액트에서 어떠한 업데이트가 Urgent 하며 어

위에 언급된 Query 가 더 우선 순위가 높다.시각적/마우스 이벤트는 사용자가 보조 기술을 통해 사용자의 경험을 반영하는 쿼리DOM Tree 에 노출된 모든 요소를 조회하는 데사용할 수 있다.옵션으로 엑세스 가능한 이름을 사용함으로써 엘리먼트를 반환 받을 수 있다.g

userEvent는 fireEvent를 사용해서 만들어졌다.userEvent의 내부 코드를 보면 fireEvent를 사용하면서엘리먼트의 타입에 따라서 Labeldmf zmfflrgoTdmfeo,checkbox, radio 를 클릭했을 때 타입에 맞는 적절한 반응을 보여

useAuth 커스텀 훅을 만들어서 로그인 상태 값을 받아온다.이때 로그인 상태는 로컬 스토리지에 저장된 JWT Refresh Token의 생명주기와 동일하다.제어할 페이지를 감쌀 Protected 컴포넌트 이다.로그인 된 상태에서 option 이 false로 지정된

React Hook 중의 하나로, 주로 DOM 요소에 대한 참조를 저장하거나 렌더링 사이의 값을 유지하기 위해 사용된다. 렌더링 사이의 값을 유지하기 위해 사용한다? 컴포넌트가 다시 렌더링 될때마다 useRef로 생성된 ref 객체가 유지된다는 의미한다.

React component가 렌더링 되거나(상태값이 변하거나) 의존성 배열에 존재하는 값의 참조값이 변경될 때특정 작업(Side Effect)을 실행할 수 있도록 하는 리액트 Hook이다. Side effect component 렌더링 된 이후에 비동기로 처리되어야

useTransition은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅이다.useTransition은 매개변수를 받지 않는다.useTransition은 두 개의 항목이 있는 배열을 반환한다.보류 중인 트랜지션이 있는지 여부를 알려주는 isPend

여러 개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트 는 과부하가 걸릴 수 있다.이러한 경우, reducer 라고 하는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합할 수 있다.아래 예시가 여러 개의 state 업데이트가

React 18에서 새롭게 추가된 Hooks로,useId는 컴포넌트의 최상위 수준에서 호출하여 고유한 ID를 생성한다.매개변수를 사용하지 않는다.특정 컴포넌트 내 특정 useId 와 관련된 고유 ID 문자열를 반환한다.useId는 훅이므로 컴포넌트 최상단 또는 훅에서만

함수형 컴포넌트의 생명주기이다.이 그림에서는 초기 컴포넌트가 생성될 때를 Mounting,생성 후, 소멸 전, props나 상태가 업데이트 될 때를 Updating이라 한다.함수형 컴포넌트의 플로우는 다음과 같다.컴포넌트를 마운팅하고 반환값을 렌더링한다.이후 Virtu

제어 컴포넌트 비제어 컴포넌트를 살펴보기 전에 먼저 신뢰 가능 단일 출처에 대해서 알아보고자 한다.제어컴포넌트를 통해서 React에서는 이 문제를 해결했기 때문이다.하나의 상태는 한 곳에만 있어야 한다.value Attribute는 최신화 된 값을 가지고 있다.때문에