본문 바로가기

개발/REACT6

Lombok이란 / cannot find symbol 에러 Lombok이란,Getter, Setter, ToString, 생성자 등의 반복되는 메소드를 Annotation을 사용해서 자동으로 작성해주는 자바의 라이브러리이다. 1. Lombok 없이 만든 User 클래스public class User { private String name; private String email; private int age; public User() {} public User(String name, String email, int age) { this.name = name; this.email = email; this.age = age; } public String getName() { ret.. 2025. 4. 4.
React 테이블 커스텀하기 / MUI X DataGrid를 파헤쳐보자 Importimport { DataGrid } from '@mui/x-data-grid';  행/열 정의하기import * as React from "react";import { DataGrid, GridRowsProp, GridColDef } from "@mui/x-data-grid";const rows: GridRowsProp = [ { id: 1, title: "컴플리트 언노운", director: "제임스 맨골드", status: "완료" }, { id: 2, title: "첫 번째 키스", director: "츠카하라 아유코", status: "완료" }, { id: 3, title: "미키17", director: "봉준호", status: "완료" }, { id: 4, title: ".. 2025. 3. 23.
React 테이블을 만드는 방법 / react-bootstrap-table, material ui 1. react-bootstrap-tabledeprecated 된 상태이므로 react-bootstrap-table2를 사용할 것을 권장한다.https://allenfang.github.io/react-bootstrap-table/ React Bootstrap Table allenfang.github.io 예시는 요기 더 잘 나와있다.https://react-bootstrap.netlify.app/docs/components/table/ Tables | React BootstrapExamplereact-bootstrap.netlify.app  2. react-bootstrap-table22020년을 마지막으로 더이상 업데이트 되지 않고 있다.https://react-bootstrap-table.githu.. 2025. 3. 23.
ReactJS 입문 with 니꼬쌤 3 - SUPER CONVERTER 코드 분 시간 변환기를 개발해보자. minutes와 hours를 id로 가지는 input 내에서 어떤 변경이 일어났을때 onChange 함수가 실행된다. onChange 함수 내에서는 input value, 즉 event.target.value를 받아서 amount의 값에 업데이트해준다. input의 value에 이러한 amount를 연결해줌으로써 input 값을 외부에서도 수정해줄 수 있게 되었다. 그리고 amount에 변경이 생기더라도 여전히 당연히 input value만 리렌더링 된다는 것을 기억하자. 해당 예제를 통해 state를 바탕으로 UI를 변경할 수 있다는 게 얼마나 유용한 것인지도 알게 되었다. value={flipped ? amount * 60 : amount} disabled={flippe.. 2022. 3. 22.

티스토리툴바