Life goes slowly...

ag-grid-react에서 엑셀 다운로드(Excel Export) 기능은 매우 강력하며, Enterprise 기능이 아닌 Community Edition에서도 사용 가능합니다. 단순 클릭으로 현재 그리드에 표시된 데이터를 .xlsx 또는 .csv 형식으로 내보낼 수 있습니다. ✅ 1. Excel 파일 다운로드 (XLSX)import React, { useRef, useState } from "react";import { AgGridReact } from "ag-grid-react";import "ag-grid-community/styles/ag-grid.css";import "ag-grid-community/styles/ag-theme-alpine.css";const GridExportExcel = (..

ag-grid-react에서 행(row) 편집 기능은 매우 강력하며, 인라인(in-place) 방식으로 데이터를 편집할 수 있습니다. React 개발자의 관점에서 보면, 셀 편집은 자동으로 관리되지만, 외부 상태 동기화나 저장 버튼과의 연동을 직접 제어할 수 있어야 실전에서 유용합니다.✅ 기본 행 편집 방식Ag-Grid는 셀 단위 편집을 지원하지만, 그리드 옵션을 조금만 설정하면 **행 단위 편집(row editing)**처럼 동작하게 할 수 있습니다. import React, { useState } from "react";import { AgGridReact } from "ag-grid-react";import "ag-grid-community/styles/ag-grid.css";import "ag-g..

✅ 사용자 정의 셀 렌더러란?기본적으로 AgGridReact는 텍스트 기반으로 데이터를 셀에 출력합니다. 하지만 복잡한 UI(버튼, 이미지, 링크, 조건부 스타일 등)를 출력하고 싶은 경우, React 컴포넌트를 셀 렌더러로 지정할 수 있습니다.이는 일종의 Cell View Layer를 개발자가 직접 구성할 수 있도록 해주는 구조입니다. 💡 동작 방식 요약React로 렌더러 컴포넌트를 작성한다.AgGridReact의 frameworkComponents에 등록한다.컬럼 정의(columnDefs)의 cellRenderer 속성으로 해당 컴포넌트를 지정한다.Ag-Grid가 각 셀에 대해 해당 컴포넌트를 mount한다.🔧 AgGridReact 에서 prop를 통한 이벤트 처리 예제 import React, ..

react.js의 HTML 태그 관련 Error 발생 The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. React에서 흔히 볼 수 있는 에러입니다. 이는 코드규칙을 관리할때 사용되는 라이브러리 eslint에서 제공되는 경고로써 react.js의 태그를 사용할 때에는 href의 유효성값이 필요하다는 Error입니다. ..

react.js의 HTML img 태그 관련 Error 발생 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images React에서 흔히 볼 수 있는 에러입니다. 이는 코드규칙을 관리할때 사용되는 라이브러리 eslint에서 제공되는 경고로써 react.js의 img 태그를 사용할 때에는 alt를 작성하지 않았다는 Error입니다. 사실 alt를 작성하지 않아도 되지만 표준에 맞게 사용하려면 alt를 빼면 안 됩니다. //잘못된 코드 //수정된 코드

Invalid DOM property `for`. Did you mean `htmlFor` Error 발생 Warning: Invalid DOM property `for`. Did you mean `htmlFor`. React에서 흔히 볼 수 있는 에러입니다. React의 JSX는 자바스크립트의 구조로 만들어져 있습니다. 태그에서 for는 반복문을 인식하기에 발생되는 에러입니다. 따라서 JSX문법에 맞게 수정을 해야 합니다. JSX문법에 맞는 코드는 htmlFor입니다. //잘못된 코드 React Jsx 문법 //수정된 코드 React Jsx 문법

Expected `onClick` listener to be a function, instead got `false` Error 발생 Warning: Expected `onClick` listener to be a function, instead got `false`. React Component에서 Button 등과 같은 이벤트 발생 후에 특정한 함수인 function을 호출하려 할 때에 발생하는 Error입니다. 이는 정상적으로 호출은 되긴 하지만 React의 Console창에서 경고인 오류를 보이게 됩니다. //잘못된 코드 Click //수정된 코드 Click

React에서 팝업창으로 오픈하여 데이터를 처리한 후에 부모 창에 있는 함수를 호출하는 상황을 정리합니다. 부모 창에서 버튼을 클릭하였을 경우에 popup.jsp을 새창으로 열고 요소 내부에 기능의 함수를 설정합니다. //부모창 export default function ParentFunc() { function popupFunction() { let popup = window.open("/popup.jsp", "", 'width=800,height=600'); window.parentCallback = () => { console.log('Hello World!!'); } } return ( popup button ); } 새창으로 popup.jsp을 열고 ParentFunc() 함수를 호출하였을 경우..

이벤트 발생과 그에 따른 이벤트 핸들러 콜백 함수를 다루는 것은 프로그램 코드를 작성하는데 가장 중요한 개념입니다. 클릭이벤트처럼 단순하지 않으며 키보드의 입력이 지속적으로 발생할 경우 여러 번의 이벤트를 통하여 API를 호출하게 되면 서버에 과부하가 발생하게 됩니다. debounce란? debounce란 특정 이벤트가 발생할 때에 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기 위하여 사용되는 함수입니다. onchange() 함수를 통하여 이벤트가 발생할 때마다 서버에 API를 호출하기보다는 일정 시간이 지난 후에 서버 API를 호출하게 되는 지연 호출의 역할을 하는 함수를 말합니다. 함수의 설정마다 다르겠지만 호출되는 함수들 중 마지막 또는 제일 처음만 호출하도록 하는 함수입니다.비슷한 함수..

React에서는 HTML을 직접적으로 작성하지 않고 유사해 보이는 JSX을 사용합니다. JSX란 자바스크립트의 확장된 문법으로써 XML과 비슷하게 생긴 프로그래밍 언어입니다. React의 JSX란? JSX란 자바스크립트의 확장된 문법으로써 Javascript XML의 줄임말입니다. JSX는 React에서 사용되는 문법으로 공식적인 자바스크립트 문법은 아닙니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 문법으로 변환됩니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정하여 개발자들이 임의로 만든 문법 또는 자바스크립트의 문법을 사용할 수 있도록 변환합니다. JSX 문법 규칙 1. 부모의 요소 하나가 반드시 감싸는 형태야 하는 규칙 - Virtual ..

Each child in a list should have a unique "key" Error 발생 Warning: Each child in a list should have a unique "key" prop. React 프로젝트를 진행 중에 발생하는 Error입니다. 이는 Chrome의 개발자 도구인 Console에서 확인할 수 있으며 React에서 map 함수를 사용하여 반복문을 사용하는 경우에 발생하는 스크립트 오류입니다. React에서는 key prop를 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성합니다. React 라이브러리는 이 관계를 이용하여 컴포넌트 렌더링 여부를 결정하기 때문에 불필요한 렌더링을 방지하기 위하여 각 자식 컴포넌트마다 독립적인 Key 값을 넣어줘야 하는데 Key 값..

cannot appear as a child of . Error 발생 Warning: validateDOMNesting(...): cannot appear as a child of . React 프로젝트를 진행 중에 발생하는 Error입니다.이는 Chrome의 개발자 도구인 Console에서 확인할 수 있는 Error로써 스크립트 오류로 확인할 수 있습니다.이는 태그 안에 태그가 들어가면 안 된다는 스크립트 오류입니다.( 자식으로 가 올수 없다는 경고)그리고 React의 JSX에서 Table를 쓸때에는 유의해야 할 부분이 있습니다.React의 JSX 사용시 반드시 tbody와 thead를 써야 하며 tbody를 선언해야만 tr과 td를 사용할 수 있습니다. 그리고 thead를 작성해야만 th를 사용할 수..

React를 개발 시 JSX 또는 일반 코드 작성 시에 조건문인 IF/ELSE를 사용하는 경우가 있습니다. React에서는 컴포넌트에 render 함수가 필요하며 JSX로 Return을 해줘야 하기에 IF문 또는 Switch문 사용이 제한이 있습니다. 그렇기에 삼항 연산자 또는 &&연산자를 많이 사용하게 됩니다. React에서는 IF 조건문을 어떻게 사용하는지 알아보도록 하겠습니다. React IF/ELSE 문 React에서 IF/ELSE문을 사용하려면 컴포넌트에서 JSX를 조건에 따라서 작성해야만 합니다. function Component() { if ( true ) { return Component True; } else { return null; } } React 삼항연산자 삼항 연산자란 React..

React.js의 Hooks React에서 Hooks은 React의 새로운 기능으로써 React 16.8 버전에서 새로 추가된 기능입니다. state, component에 대한 모든 것을 바꿔놓은 기능입니다. Hooks을 이용하여 기존의 함수형 Compontent에서도 클래스형 Compontent 작업을 할 수 있게 되었습니다. 기존의 클래스형 Compontent가 가지고 있었던 복잡성, 재사용성의 단점들까지 모두 해결하기도 했습니다. 함수형 Compontent에서 사용되는 Hook 기능중에서는 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정할 수 있는 useEffect의 함수가 있습니다. React.js의 Hooks 사용하며 없어진 문제점 1. Compontent 사이에서 상태와 관..

React.js의 useEffect() 함수 React에서 컴포넌트를 작성할 때에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하게 되지만 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없는데 이때 사용되는 함수가 useEffect() 함수입니다. 컴포넌트가 화면에 나타나거나, 사라질 때 또는 업데이트될 때에 렌더링을 해주는 함수입니다.(컴포넌트가 마운트 될 때 실행되는 함수입니다.) useEffect() 함수의 가장 기본적으로 사용될 때의 예시입니다. //렌더링이 완료될때마다 실행 useEffect(() => { }); //처음 렌더링이 완료된후 text값이 변경될때마다 실행 useEffect(() => { },[text]); //처음 렌더링이 완료된후에만..