React (20) 썸네일형 리스트형 [React] Error Boundary Component 1. 클래스형 컴포넌트 *주의: Class components are still supported by React, but we don’t recommend using them in new code. - 공식 문서: https://react.dev/reference/react/Component import { Component } from 'react'; class App extends Component { constructor(props) { // constructor 함수는 컴포넌트가 mount 되기 전에 실행 됨 super(props); this.state = {}; // 보통 state를 initailizing하거나 this.handleClick = this.handleClick.bind(this.. [React] useReducer 1. 목적 - state 업데이트 로직을 하나의 함수로 통합하여 컴포넌트 밖에서 정의할 수 있다. - 앱이 커지면서 복잡해진 state logic을 reducer를 이용하여 더욱 쉽게 관리할 수 있다. - 관심사 분리를 통해 컴포넌트 로직의 구조를 빠르게 파악 할 수 있다. 2. 방법 function TaskApp() { const [tasks, setTasks] = useState(initialTasks); function handleAddTask(text) { setTasks([ ...tasks, { id: nextId++, text: text, done: false, }, ]); } function handleChangeTask(task) { setTasks( tasks.map((t) => { if.. [React] Portal 모달 컴포넌트는 주로 전체 화면 위에서 표시되는 오버레이이다. 특정 조건에 따라 모달이 렌더링 되는 JSX 코드를 작성하면 여러 깊은 HTML 요소 안에 모달 요소가 포함된다. 이는 시맨틱 html 구조 관점에서 기술적으로 좋은 코드라고 볼 수 없다. 또한 만약 스크린리더가 html 코드를 읽으면서 갑자기 모달이 등장하면 이것이 일반적인 오버레이 요소라고 인식하지 못할 수 있어 접근성 측면에서도 좋지 못하다. style을 적용할 때에도 부모의 css 속성을 물려 받아 해결하기 까다로운 문제가 발생할 수도 있다. createPortal을 이용하면 컴포넌트가 호출되는 시점에서의 실제 DOM 계층 구조에 종속되지 않고 그 바깥에서 렌더링 되도록 위치를 지정할 수 있다. -> createPortal( 리액트 노.. [React] useContext 개요. - 리액트에서 데이터의 흐름은 부모 컴포넌트에서 자식에게 인자(props)로 전달하는 맥락이 원칙이다. - 이러한 기본적인 맥락 외에 새로운 맥락을 생성할 수 있게 해주는 방법이 Context API이다. - Context Api는 props drilling을 회피하기 위한 것이 본래 목적이다. - 즉, 의존성을 함수형 컴포넌트에 인자가 아닌 함수 내부에서의 호출로 주입 받는다. 1. 새 컨텍스트 생성하기 import { createContext } from 'react'; export const ThemeContext = createContext(defaultValue); -컨텍스트 이름은 대문자로 시작한다. -컨텍스트 자체는 어떤 정보도 포함하지 않는다. -defaultValue는 이 cont.. [React] Recoil . [React] React-Query 개요: Remote(Server-side) State management - 적은 코드로 원격 데이터를 패치하고 관리할 수 있게 해주는 라이브러리이다. - 리액트 쿼리는 서버 데이터를 캐싱하여 여러 컴포넌트에서 동일한 쿼리에 대해 데이터를 공유한다. - 이는 마치 리덕스에 상태를 저장해두고 어디에서나 사용할 수 있도록 하는 것과 유사하다. - 서버 데이터는 서버에서 관리하는 데이터이며, 여러 클라이언트에게 동시에 제공한다. 반면 클라이언트 데이터는 현재 서비스를 이용하는 각각의 사용자 위한 데이터이다. - 이러한 네트워크 바운더리에 따라 서로 다른 특징을 갖는 데이터를 분리하여 관리할 수 있다. 이를 가능하게 하는 것이 바로 캐시다. - 캐시를 활용하여 서버 데이터를 클라이언트 측 state manage.. [React] Redux Toolkit & Middleware 1. Redux Tookit - 개요: 기존의 리덕스는 프로젝트의 규모가 커져가면서 여러 문제점에 봉착한다. 액션의 타입 식별자를 사용할 때 오타 및 충돌이 일어난다거나(식별자를 상수화해서 관리하면 해결됨), 관리해야 할 상태가 많아지면서 액션의 개수, 리듀서 함수의 길이 등도 증가되어 리덕스 파일이 유지할 수 없을 만큼 거대해진다거나, 상태를 업데이트할 때마다 업데이트와 관련 없는 기존의 모든 상태를 복사해야하는 번거로움이 발생한다. 이러한 문제에 대해 리덕스를 더 편리하고 쉽게 사용할 수 있게 리덕스를 단순화하였다. 2. 리덕스 툴킷 Boiler plate code -store, slice, reducer, initialState 는 컴포넌트 밖에서 정의 -Provider, dispatch, acti.. [REACT] Nested Routes 1. 2. import { Outlet } from "react-router-dom"; https://ui.dev/react-router-nested-routes The Guide to Nested Routes with React Router In this comprehensive, up-to-date guide, you'll learn everything you need to know about creating nested routes with React Router. ui.dev 이전 1 2 3 다음