React

사용자의 인터페이스를 구축하기 위해서 만들어진 Javascript 라이브러리입니다.🔑 keywordreact를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 사용된다.Data Flow : React는 데이터의 흐름이 한 방향으로만 흐르는

useLocation은 사용자가 현재 URL 경로에 대한 정보를 제공하는 React 컴포넌트의 일부로 사용됩니다.useLocation 훅을 사용하면 현재 경로(location) 객체에 접근할 수 있습니다. 이 객체에는 현재 URL과 관련된 다양한 정보가 포함되어 있습니

클라이언트 사이드 렌더링은 HTML 파일을 받아와서 Client(웹 브라우져)에서 렌더링이 일어나는 방식이다.브라우저의 요청을 서버로 보내면, 서버는 HTML 파일과 함께 JavaScript 파일을 보낸다. 클라이언트가 파일을 받으면, 사용자의 상호작용에 따라 JS 파

프론트엔드 개발에서 데이터 바인딩은 중요한 개념 중 하나라고 볼 수 있다.화면에 표시되는 데이터와 애플리케이션 상태를 동기화하는데 사용되는데,데이터 바인딩을 통해 애플리케이션의 사용자 인터페이스는 상태 변화에 따라 자동으로 업데이트 되며, 사용자와의 상호작용에 따라 데

useEffect실행 시점은 렌더링 이후에 실행이 된다 .즉, useEffect는 처음 렌더링이 일어나고는 useEffect는 렌더링 이후에 확인하기 때문에 useEffect에서 request시에 데이터를 담아서 오게 되는 경우return문에 map함수를 사용해서 쓰

Dom노드나 React엘리먼트에 접근하는 것이 가능하다.값이 변경되어도 re-render를 일으키지 않는다.같은 메모리 주소를 갖고있기 때문에 자바스크립트의 === 연산이 항상 true 를 반환합니다. 즉 변경사항을 감지할 수 없어서 리렌더링을 하지 않는다는 뜻입니다.

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

렌더링이란? 함수(컴포넌트)가 호출되면 VirtualDOM(객체)이 반환되고 그것이 RealDOM(DOM)에 반영이 되는 그런 과정을 거치게 된다. >Render: 함수가 호출되어 VirtualDOM에 반환이 되는 것을 의미함 개발자가 해야할 것은 ? 함수(컴포넌트

useState란 ?

개념:웹페이지에 들어가 있는 html Element들을 Tree형태의 구조로 표현한 것이다.개발자들은 DOM이 제공하는 API를 통해서 DOM구조에 접근을 하고 변경할 수 있다.변경된 element들을 찾고 해당 element와 자녀 element들을 돔에서 제거하고

개념: UseCallback 메모이제이션된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리액트 훅이다.useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.함수를 선언하는 것

개념: useMemo 메모이제이션된 값을 반환하는 useMemo 는 특정 결과값을 재사용 할 때 사용한다. useMemo를 사용하여 값을 캐시하면 해당 값은 렌더링 중에 한번 계산이 되고 이후 렌더링에서는 의존성 배열의 값이 변하지 않는다면 이전에 계산한 값을 재사용한

개념 : useTransition은 UI를 차단하지 않고 상태를 업데이트 할 수 있는 리액트 훅이다.useTransition은 두개의 항목이 있는 배열을 반환한다.1\. isPending 플래그는 대기중인 transition이 있는지 알려준다.2\. startTrans

React 공식 문서에 쓰여있는 설명에는, ' context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다 ' 라고 적혀있다.전역적인 데이터를 Props로 단계별로 전달(Prop Drilling)해야 한다면 개

useState 훅 처럼 State를 생성하고 관리할 때 사용한다.useReducer는 복잡한 상태를 관리할때 사용한다.Reducer : 컴포넌트의 state를 업데이트 하는 역할을 한다.Dispatch: state 업데이트를 위한 요구Action: 요구 내용useRe

useId 접근성 속성에 전달될 수 있는 고유 ID를 생성하기 위한 React Hook입니다.useId 구성요소의 최상위 수준에서 호출한다.useId의 반환값을 key를 위해 사용하지말아라.key 값을 위해서 사용하면 너무 많은 호출이 일어난다.키는 데이터에서 생성 되

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

React 개념 : UI를 구축하기 위해서 만들어진 JS 라이브러리입니다.React 장점 : 컴포넌트 기반 아키텍쳐, Virtual Dom, 단방향 데이터 흐름컴포넌트 기반 구조 : 복잡성 감소, 재사용성 극대화, 유지보수에 용이합니다.Virtual Dom :최소한의

CRA란 ? Create React App(CRA)는 React 애플리케이션을 쉽게 생성하고 설정하는 도구다. CRA를 사용하면 개발 환경을 구성하고 초기 프로젝트를 수동으로 처리하는 번거로움을 줄일 수 있다. CRA가 없었을때 Webpack, Babel 및 기타 도

개념 : 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있게해서 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 도와주는 기술입니다.클래스형 컴포넌트의 기능 사용할 수 있도록 도와준다.\`Hook를 통해 클래스형 컴포넌트에서만 가능하던 함수형 컴