react

📍 투두리스트 프로젝트를 진행하며 모달창을 만들어야 할 일이 있었는데 그때는 라이브러리를 사용하는게 좋을지 그냥 코드로 만들어 보는게 좋을지 고민하다가 일단 그냥 만들어보자! 라는 마음으로 만들었다. 이번에 다른 프로젝트를 진행하며 모달창을 만들일이 또 생겼는데 이번에는 chakra를 사용해 간단하게 모달창을 만들어 보았다. 라이브러리 없이 모달창 구현하기 1. 모달창 컴포넌트 생성 및 버튼 만들기 export default function TodoEditModal() { return ( edit_square ); } 모달 컴포넌트를 생성하고 클릭했을 때 모달창을 띄울 버튼을 만든다. 2. 버튼 상태 관리해주기 import React, { useState } from 'react'; export defa..

🚨 에러 발생 리액트에서 input type 체크박스를 사용하던 중에 아래와 같은 에러가 발생했다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 해석해보면 checked 속성을 사용하여 값을 지정하지만 해당 값을 변경할 때 처리할 onChange 핸들러가 없어 오류가 난다는 것이다. 따라서 `defaultChecked`를 사용하거나 `onChange` 혹은..

✨프로젝트 생성하기 1. firebase 홈페이지 접속하기 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2. 시작하기 클릭 3. 기존의 프로젝트가 있다면 프로젝트 만들기 클릭 or 처음이라면 프로젝트 추가하기 클릭 4. 프로젝트 이름 지정하기 5. Google 애널리틱스 체크박스 해제 → 프로젝트 만들기 클릭 ✨호스팅 설정하기 빌드 탭 → Hosting 클릭 1. 시작하기 클릭 2. 윈도우는 명령프롬프트 → 오른쪽버튼 → 관리자권한으로 실행 3. 명령어 복사해서 설치 → 다음 클릭 4. 내 프로젝트 루트 디렉토리로 가서 명령어 복사해서 설치 (vs code로 했다면 해당 프로젝트..

# useReducer useState 처럼 리액트의 상태관리를 돕는 도구 복잡한 상태변화 로직을 컴포넌트에서 분리 복잡한 코드를 깔끔하게 정리할 수 있어서 유지보수에 좋음 Readucer / Dispatch / Action 으로 이루어져 있다. 예를들어 우리가 은행거래를 할 때를 생각하면 쉽다. 1. 철수가 은행에서 거래를 하기위해 요구(Dispatch)를 한다. 2. 그 요구에는 '만원을 출금해주세요' 라는 내용(action)이 있다. 3. 그리고나서 은행(Reducer)에 전달을 한다. 4. 은행은 내용대로 처리를 한뒤 철수의 은행거래내역(state)에 업데이트를 해준다. reducer : state를 업데이트 하는 역할(은행) dispatch : state 업데이트를 위한 요구 action : 요..

# React.memo 리액트에서 제공하는 고차 컴포넌트(HOC) 고차 컴포넌트? 어떠한 컴포넌트를 인자로 받아서 최적화된 컴포넌트를 반환해주는 함수 최적화된 컴포넌트는 props check를 통해 자신이 받는 props에 변화가 있는지 확인한 후 있다면 렌더링 해주고 없다면 기존에 있던 내용을 재사용 해준다. 오직 props 변화에만 의존하는 최적화 방법 React.memo가 필요할 때? 1. 컴포넌트가 같은 Props로 자주 렌더링 될 때 2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할 때 # 예제 1 부모 컴포넌트 import React, { useState } from 'react'; import './App.css'; import Child from './Child'; functio..

- 컴포넌트 성능을 최적화 하는 방법 # useCallback 인자로 전달한 콜백함수 그 자체를 Memoization 해주는것 함수가 필요할 때마다 새로 생성하는게 아니라 메모리에서 가져와서 재사용하는 것 렌더링 → component 함수 호출 → 모든 내부 변수 초기화 useCallback 사용 렌더링 → component 함수 호출 → Memoize 된 함수를 재사용 컴포넌트가 처음 렌더링 될때만 함수객체를 초기화 해주고 이후에 렌더링 될 때는 새로운 함수객체를 할당 받는게 아니라 이전에 이미 할당받은 함수객체를 계속 가지고 있으면서 재사용하는것 useCallback (() => { return value; }, [item]) 첫번째 인자 ☞ Memoization 해 줄 콜백함수 두번째 인자 ☞의존성..