front/React11 [React]테이블 컬럼에서 key와 dataIndex 분리의 필요성 React 기반 테이블 컴포넌트에서 컬럼을 정의할 때 key와 dataIndex 속성을 분리하여 사용하는 것은 단순한 중복이 아닌, 명확한 기술적 이점을 제공합니다. 이 문서에서는 이 두 속성을 분리해야 하는 주요 사례와 그 근거를 설명합니다.1. 동일한 데이터 필드를 다른 방식으로 표시기술적 근거동일한 데이터 필드를 여러 형식으로 표시해야 하는 경우, 동일한 dataIndex를 사용하면서 서로 다른 key 값으로 컬럼을 구분할 수 있습니다.코드 예시// 데이터const drivers = [ { id: 1, name: "김철수", birthDate: "1985-03-15", // YYYY-MM-DD 형식 registrationDate: "2023-01-10" }]// 테이블 컬럼.. front/React 2025. 4. 7. 더보기 ›› [Vite] SockJS, Stomp 사용하여 WebSocket 연결 중 발생 이슈 정리 현재 진행하고 있는 사이드 프로젝트에서 실시간 웹소켓 구현을 위해 SockJS와 Stomp를 사용하였는데 위 사진과 같이 소켓을 연결하고 결과를 확인해봤더니..!!!!!!!! global is not defined 에러가 발생했다 일단 에러를 서칭해보니 vite에는 global 객체를 지원하지 않았고 SockJS는 global을 의존하는 라이브러리여서 에러가 발생하는거였다. 해결방법을 찾아보니 //vite.config.ts export default defineConfig({ define: { 'global': {}, }, }); vite.config.ts 파일에 위와 같이 작성해주면 에러가 발생하지 않는다고 한다!! 그래서 적용을 해봤는데? 에러는 없어졌지만 Socket이 연결되지 않았다 ㅠㅠㅠㅠㅠㅠㅠ.. front/React 2024. 3. 22. 더보기 ›› [React] key prop - 리액트에서는 반복되는 엘리먼트를 추가할 때 'key' prop을 왜 필요할까? - 그럼 key는 어떤 값을 넣어야 하는걸까? map함수 등을 사용하여 반복되는 엘리먼트를 추가하였을 때 key prop을 추가하지 않아 다음과 같은 에러가 뜨는 것을 한번씩은 봤을 것이다. 그럼 key prop은 왜 필요한걸까? 리액트 공식문서에는 'key' 가 필요한 이유를 다음과 같이 설명하고 있다. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get i.. front/React 2023. 5. 14. 더보기 ›› [React] React-Query 사용법 예제코드 리액트 쿼리 리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다. 리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다. 이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다. 리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다. 이를 통해 데이터 로딩과 변경을 처리할 수 있다. useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며 useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다. 리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서.. front/React 2023. 4. 27. 더보기 ›› [React] 전역 상태관리 라이브러리 장단점 비교 정리 React로 개발을 진행하다보면 Component의 상태관리를 하게된다. 그런데 해당과정에서 컴포넌트의 Depth가 깊어질수록 반복적인 코드작성이 많아지고 그 횟수가 1000번이라고 생각하면 시간도 어마어마하게 걸릴것이다. 이와 같은 경우 전역적으로 상태를 관리해주는 라이브러리를 사용해서 해결할 수 있으며 종류마다 장단점이 있다. Redux 상태관리를 위해 사용하는 자바스크립트 라이브러리이다. 리액트에서만 사용할 수 있는 라이브러리가 아닌 독립적으로 분류되어있는 라이브러리이기 때문에 리액트 뿐 아닌 Vue나 앵귤러 등에서도 사용이 가능하다. Redux는 가장 많이 사용되는 전역 상태 관리 라이브러리 중 하나이며, 컴포넌트 간의 상태를 트리 구조로 관리하며, 액션(Action)과 리듀서(Reducer)를 .. front/React 2023. 4. 26. 더보기 ›› 반응형 이전 1 2 3 다음
