Ch.Covelope

리액트에서 함수형 컴포넌트 이전 클래스형 컴포넌트 사용시에는 상태를 지역변수 state에 정의하고 상태를 변경할 메소드 안에 setState 메소드를 넣어서 상태를 변경 했다. 그럼 왜 state변수를 직접 변경하지 않고 setState를 통해서 했는지는 해당 메소드를 사용해서 리액트 컴포넌트에 상태변경에 대해서 알려주고 리렌더링을 요청 하기 위해서다. 함수형 컴포넌트 리액트 함수형 컴포넌트에서는 useState 라는 React Hooks를 사용해서 상태를 관리한다. 해당 훅은 초기값을 받아서 [state, setState] 의 배열을 반환하며 [상태, 상태 변경 핸들러] 로 보면 된다. 함수형 컴포넌트는 렌더가 필요 할 때마다 함수를 재호출 하는데 렌더링은 곧 함수 호출이다. 함수가 재호출 되었을때 이..

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기 JSX 란 JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다. UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다. JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다. 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다. JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다. 콘솔을 찍어보고 생긴 궁금증 배열에 J..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

리액트 훅 (React hook) 간단 정리 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마..