반응형 프론트엔드/리액트25 '{}' 형식은 'ReactNode' 형식에 할당할 수 없습니다. 정말 고생한 에러 메시지다. 결론은 코어 공통 모듈의 리액트 버전을 언제 바꿨는지 모르겠는데 18로 바꿔버리면서 발생했다.(내쪽은 17버전) 리액트 18의 @types에 문제가 있는건지 기존 라이브러리들이 대응을 못하는건지 React.Component를 JSX.Component로 인식되지 못하고 발생하는 문제라던데 아래 설정을 추가하면서 해결이 됐는데 왜 발생하는지 근본적인 이유는 잘모르겠지만 라이브러리들이 많이 터져버린다. 라이브러리들 의존성 자체가 17버전까지 Compatibility를 가진다고 돼있어서 아무래도 라이브러리쪽이 문제인걸로 보인다. "resolutions": { "@types/react": "17.0.2", "@types/react-dom": "17.0.2" }, https://stac.. 2022. 12. 10. [react-grid-layout] 그려진 아이템의 width/height 변경하기 어느날 화면 최소화/최대화 기능을 만들어야겠다 생각이 들었다. 화면 구성용으로 react-grid-layout 라이브러리를 쓰고있고 개중에 사이즈에 따라 가변적으로 변하는 ResponsiveGridLayout을 쓰고 있다. 나는 ResponsiveGridLayout의 children으로 들어가는 데이터가 state값이고 이 값의 w(너비), h(높이) 값을 변경해주면 리렌더링 될거라고 생각했는데 테스트해보니 동작 안함 export type ViewConfig = { i: string; content: any; x: number; y: number; w: number; h: number; static?: boolean; }; return ( {items.map((el) => ( {el.content} )).. 2022. 12. 10. setState 체인과 useEffect 자바 개발의 관성적으로 데이터를 불러오고 state를 하나하나 수정을 해주도록 코드를 짜고 있었는데... 이화면에서 수정했을때 저화면에서 수정했을 때 매번 여러 스테이트를 변경해주는게 하다보니 이거 아니다 싶다. // A Component에서 setSampleFile(aaa) setSampleName(aaa.name) // B Component에서 setSampleFile(bbb) setSampleName(bbb.name) . . . 위 문제는 리액트를 쫙 공부하고 시작한게 아니라 useState만 주구장창 쓰다보니 발생한 문제... 위에처럼 계속 적어오다가 어느순간 두번째 줄을 까먹고 첫번째 줄만 적는 실수를 범했다. 아 이거 실수의 여지가 있네 라고 생각이 들었고 기존 코드들도 다 수정하기로 했다. .. 2022. 12. 9. 함수형 컴포넌트에서 제네릭 사용하기 MUI의 DataGrid 컴포넌트를 사용하면서 기본 설정값들을 매번 써주는게 귀찮아졌다. 한번 감싸서 BaseItem만 받을 수있는 그리드 컴포넌트를 만들기로 했다. 클래스 구조에서는 제네릭을 사용해봤는데 함수형에서는 제네릭을 처음 사용해서 조사해봄 1. 일단 props에 제네릭을 적는다. DataGridProps 라고 이름짓고 제네릭을 적용한다. export interface DataGridProps { rows: ItemType[]; setRows: React.Dispatch; } 2. 컴포넌트에 제네릭을 적고 props와 연결한다. MyDataGrid 컴포넌트는 제네릭 컴포넌트가 됐다. MyDataGrid는 BaseItem을 상속하는 데이터만 받을 수 있다. MyDataGrid에서 전달한 제네릭 값.. 2022. 12. 5. 리액트 리스트에 key가 필요한 이유 보호되어 있는 글 입니다. 2022. 12. 2. [MUI] 그리드 key-value 변수를 객체에 입혀주는 방법 그리드에서 셀 데이터 변경 이벤트를 처리한다. id, field, value가 넘어온다. 찾아보니까 아래 코드 모양이 제일 예쁘다. map을 써서 조건문으로 바꾸고 싶은 값을 바꿔줌 근데 content라는 속성 key가 딱 정해져있지 않고 바뀐다. setData( data.map((it) => it.id === targetId ? { ...it, content: newContent } : it ) ); 기존 객체에 이렇게 입혀주고 싶다. key:value 형태는 안되나보다. 객체에 바로 key:value 형태로는 안써지는 듯 하여 object['key'] = value; 형태로 써야겠다 싶어서 아래 코드 처럼 BaseItem에 인덱스 시그니처 추가 interface BaseItem { [key: stri.. 2022. 11. 30. 이전 1 2 3 4 5 다음 반응형
