728x90 반응형 react13 [TIL] 11/18 map 에서 key 가 필요한 이유, 1. map 에서 key 가 필요한 이유map 으로 컴포넌트를 반복해서 렌더링할 경우, 각 컴포넌트에는 key 값을 넣어줘야 한다. 넣어주지 않아도 에러가 나지는 않지만, 개발자 도구를 열어보면 콘솔창에 " Warning: Each child in a list should have a unique "key" prop " 라는 경고 문구를 확인할 수 있다. 그렇다면 key 는 왜 필요한 걸까? 결론부터 말하면 성능 최적화를 위해 필요하다. 리액트는 가상 DOM 을 사용하여 실제 DOM 과 비교하는 방식으로 렌더링 성능을 최적화한다. 리액트는 DOM 을 효율적으로 업데이트하기 위해 실제 DOM 과 비교할 수 있는 가상의 DOM 트리를 만들어 두고, 실제 DOM 과 비교해서 변경된 부분만 실제 DOM .. 2024. 11. 18. [React.js] 6주차 - TodoList 만들기 Todo 앱 만들기 1. App 컴포넌트최상위 컴포넌트인 App 에 todos state 를 정의해놓고 사용각 todo 에는 id 가 존재하는데, id 는 ref 로 정의 -> ref 는 state 와 다르게 값이 변경되어도 렌더링 ximport './App.css'import Header from './components/Header'import Editor from './components/Editor'import List from './components/List'import { useState, useRef } from 'react'const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Dat.. 2024. 11. 18. [TIL] 11/15 -webkit-box, Ellipsis, $ 접두사, 낙관적 업데이트 1. EllipsisBox 만들기ElipsisBox 란 일반적으로 텍스트가 지정된 범위를 초과할 때 나머지 텍스트를 생략하고 말줄임표 (...) 를 표시하도록 스타일링된 컨테이너를 의미한다. 1.1. 전체 코드interface Props { children: ReactNode; linelimit: number; // 몇 줄까지 보여줄 것인지}const EllipsisBox = ({ children, linelimit }: Props) => { const [expanded, setExpanded] = useState(false); // 처음엔 확장되지 않음 return ( {children} {setExpanded(!expanded)}}> .. 2024. 11. 15. [TIL] 11/14 - Zustand, useSearchParams, URLSearchParams, useLocation, 동적 CSS 1. ZustandZustand 는 작고 빠르며 확장 가능한 리액트 프로젝트에서 사용하는 상태관리(Store) 라이브러리이다. 스토어(Store) 는 애플리케이션의 여러 상태(state) 를 중앙에서 관리하는 것을 말한다. 이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 데이터 변경을 감지해 자동으로 렌더링할 수 있다. 리액트는 기본적으로 부모 -> 자식 방향으로 데이터를 전달을 하고 이런 방식을 Props(Emits) 방식이라고 부른다. 하지만 컴포넌트가 중첩되어 있는 경우, 그림과 같이 중간에 있는 컴포넌트들이 불필요한 데이터를 취급하게 된다. (Props Drilling)이 방식은 컴포넌트 간의 결합도를 높이고 유지/보수를 어렵게 만든다. 그래서 스토어를 사용해서 공유해야 하는 데이터들을 .. 2024. 11. 14. 이전 1 2 3 4 다음 728x90 반응형
