모두 이루지리라 얍!

gridjs-react 를 사용하면서 버튼을 추가하려고 했는데 한참을 실패했다.h()함수를 사용해서 돔을 생성해주고서야 정상적으로 버튼을 생성 할 수 있었다.import { Grid } from 'gridjs-react';import "gridjs/dist/theme/mermaid.css";import { h } from 'gridjs'; h( "button", { className: "btn", onClick: () => alert(`Clicked on row with Date: ${row.cells[0].data}`), }, "Click Me" ..

이번에 진행하는 프로젝트에 처음으로 리액트를 사용하게 되었다.그리드는 뭘로 사용할까 하다가 gridjs를 정하고 테스트해보는데 디자인도 깔끔하고 사용성도 편리한 거 같았다.그리고 클릭이벤트를 찾아보는데 뭔가 쉽게 검색이 되지 않았고 행 변경시에 색상 변경은 기존에 css와 부치는지는 한참을 고생해서 적용했다.기본으로 제공하는 부분이 동작을 안 해서 어쩔 수가 없었는데 임시방편으로 강제 변경을 진행해 주었다.혹시 같은 고민을 하고 있다면 다른 부분은 참고를 위해서 넣은 부분이고 클릭이벤트와 그안에 색상 지정하는 부분만 필요하다면 참고하면 될 거 같다. import { Grid, h } from 'gridjs';import "gridjs/dist/theme/mermaid.css";import React, {..

프로젝트를 처음 시작 할때 막 시작하면 나중에 유지보수가 쉽지 않다.그래서 처음부터 구조를 잡고 가는 것이 중요하다.이번에 새로운 프로젝트를 리액트로 만들게 되면서 아래같이 구조를 잡고 진행을 하였다.src/├── assets/ # 이미지, 폰트 등 정적 파일│ ├── images/│ └── fonts/├── components/ # 재사용 가능한 컴포넌트│ ├── common/ # 공통 컴포넌트 (버튼, 인풋 등)│ └── layout/ # 레이아웃 컴포넌트 (헤더, 푸터 등)├── contexts/ # Context API 관련 파일├── hooks/ # 커스텀 훅├── pages/..

펑션을 자식에서 props로 내려 줄경우 부모가 리로딩 될 때 마다 자식도 같이 리랜더링이 되게 된다.이를 피하기 위해서 useCallback함수를 사용해주면된다.기존에 함수를 useCallback으로 감싸주고 변경 값이 변경될때에만 리렌더링이 될 값을 인자로 주면 된다.적용전const handleClick = (id)=>{ let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData);};적용후const handleClick = useCallback((id)=>{ let newTodoData = todoData.filter((data) => data.id !== id); setTodo..

React.memo를 사용하면 불필요한 렌더링을 막을수가 있다.예를 들어 리스트 아이템같은경우 조회된 이후에 변경 사항이 없는 경우 다시 렌더링이 될 필요가 없다.하지만 로그를 찍어 보면 같이 렌더링을 되는것을 확인 할 수 있다.이경우 해당 부분을 React.memo 감싸주기만하면 불필요한 렌더링을 막아 줄수가 있다. 적용전const List = ({ id}) => { return ( )};export default List;적용후const List = React.memo(({ id}) => { return ( )});export default List;

1234567891011121314151617181920212223242526!DOCTYPE html>html>  head>    meta charset="utf-8" />     title>Hello React!/title>     script src="https://unpkg.com/react@16/umd/react.development.js">/script>    script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">/script>    script src="https://unpkg.com/babel-standalone@6.26.0/babel.js">/script>  /head>   body>    div id="root"..