REACT12 Beautiful dnd 드래그 기능 구현 중 오류(Cannot find droppable entry with id [droppable] at handleError)(React + TypeScript) React + TypeScript로 드래그 기능을 구현하기 위해 코드를 짰는데, 위와 같은 오류가 나왔다. 이리저리 코드를 고쳐봤는데도 계속 같은 오류가 나와서, 인터넷에 검색해본 결과, 맥이 풀릴 정도로 손쉬운 해결법이 있었다. index.tsx 파일을 열어보면, const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( ); 이렇게 되어 있을텐데, 여기에서 를 제거해주면 문제가 해결된다. React 18 이상에서 나타나는 문제로, 17이하로 다운그레이드하거나, React.StrictMode를 제거해주면 된다. 관련 링크: Invariant failed: Cannot find droppable.. 2024. 3. 26. React Router의 핵심 기능과 사용법 React Router 는 React 애플리케이션에서 라우팅을 관리하기 위한 표준 라이브러리다. (라우팅이란, 사용자가 다른 주소(URL)로 이동할 때 해당하는 페이지 또는 컴포넌트를 보여주는 기능) React Router의 기능 >> 동적 라우팅: 동적 라우팅을 통해 애플리케이션의 다른 부분에 있는 동안 특정 경로에 대한 컴포넌트가 마운트되고 언마운트된다. 예를 들어, 사용자가 '/products/1' 에서 '/products/2'로 이동할 때, 'Product' 컴포넌트는 다른 매개변수(props)를 가지고 재마운트된다. 위 예시에서 ':id'는 동적으로 변하는 URL 부분을 나타낸다. 사용자가 다른 ID를 가진 제품 페이지로 이동하면, 'Product' 컴포넌트는 새로운 'id' prop과 함께 재.. 2024. 3. 25. React의 폼 관리: 제어 컴포넌트, 비제어 컴포넌트 React의 폼 관리는 주로 컴포넌트의 상태(state)를 이용하여 사용자 입력을 처리하는 방식으로 되어 있다. 기본적으로 두 가지 방식이 있다: 제어 컴포넌트, 비제어 컴포넌트 제어 컴포넌트 >> 제어 컴포넌트에서는, React 컴포넌트가 폼 데이터를 관리한다. (폼의 각 입력 필드의 값(value)이 컴포넌트의 상태(state)에 의해 제어된다는 것) import React, { useState } from 'react'; function Form() { const [value, setValue] = useState(''); function handleChange(event) { setValue(event.target.value); } function handleSubmit(event) { alert.. 2024. 3. 24. React의 리스트 렌더링과 키 관리 React에서 리스트와 키는 컬렉션을 효율적으로 렌더링하고 관리하는데 중요한 개념이다. 리스트와 키를 올바르게 사용하면 React 애플리케이션의 성능을 크게 향상시키고, 더욱 효율적인 데이터 렌더링 및 관리가 가능해진다. 리스트는 여러 데이터 항목을 표시할 때 사용되며, 각 항목에는 고유한 키가 필요하다. 리스트를 렌더링하기 위해, React에서는 map() 함수를 자주 사용한다. 이 함수는 배열의 각 요소에 대해 함수를 실행하고, 결과를 새 배열로 반환한다. React에서는 이 패턴을 사용하여 데이터 배열을 컴포넌트 배열로 변환할 수 있다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); retu.. 2024. 3. 24. 이전 1 2 3 다음
