React

필수 프로그램 설치 (1) 크롬 브라우저 (2) VScode (3) git 설치하기 (4) Node 설치하기 (5) yarn 설치하기 yarn을 설치하기 위해 터미널에 입력하는 순간 Error⚠️⚠️ 발생 `Error EACCES: permission denied

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, (메모리의 값을 변경 시킬 수 없다) 불변성O → immutable 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없다.(메모리의 값을 변경

리액트에서 렌더링이란, 실제 DOM을 사용하는 게 아닌 가상 돔을 사용하여 브라우저의 DOM과 상호작용한다. 또한, 컴포넌트의 상태나 속성이 변경될 때마다 가상 돔이 업데이트되는 걸 볼 수 있다.React 경우 UI을 선언하고 render 함수를 호출하면 React가

설치 방법 터미널에서 입력 편의성을 위해 VScode 확장프로그램: 설치 Styles-components :CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 CSS-in-JS란 : 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

형태: const [state, setState] = useState(initialState);구조분할 할당을 사용state를 변수로 사용, setState를 이용해서 state 값을 수정useState로 원시데이터가 아닌 데이터를 변경할때는 불변성을 유지해야 한다.

최적화(Optimization) 방법 > 리-렌더링의 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 > 최적화(Optimization) 방법의 종류 memo

Local state (지역상태) 란? :컴포넌트에서 useState를 이용해서 생성한 state Global state (전역상태)란? State를 컴포넌트에서 생성되지 않고 특정 공간에서 관리한다. 이러한 공간을 **라고 하며 접근 및 관리 기능을 담당한다. R

여러 페이지를 구현할 수 있게 해주는 패키지설치방법 터미널에 yarn add react-router-domRouter.js 생성 및 route 설정 코드 작성 : 브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분

json-server란? DB와 API 서버를 생성해주는 패키지 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성 `yarn add json-server`

vite에서는 process 지원 Xerror 문구: Uncaught (in promise) ReferenceError: process is not defined 해결방법: import.meta.env.변수명으로 선언ex)const SERVER_URL = import.

Axios란 `node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있습니다.` 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 됩니다. >Axios 설치: yarn add axios 메서드 get:

커스텀 훅 (Custom Hook): 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 재사용한다. 리액트의 상태 관리 (useState, useContext 등)나 부가적인 기능 (useEffect 등)을 추상화하거나 조합하여 재사용 가

React의 Bathch 처리에 대한 큰 변화는 `React 18 version`이전과 이후라고 말할 수 있다. React 18version 이전