개발(라이브러리,프레임워크)/react.js & react native32 styled component No overload matches this call. 오류 컴포넌트에서 styled.ts에 props를 넘겨줄때, styled.ts에서 props type을 몰라 생긴 이슈 컴포넌트에서 생성해준 타입 (interface , type )을 넘겨줘서 타입 설정 해주면 된다. // Button.styled.ts import styled from "styled-components"; import { IButton } from "./index"; //Button컴포넌트에서 받은 인터페이스 넘겨주기 const Button = styled.button` // 타입 설정 .... `; export { Button }; 2023. 1. 12. Warning: Prop `className` did not match. Server: "sc-jrcTuL jZFII" Client: "sc-gswNZR bPbOgX" 오류 Next.js 에서 styled-components 사용할때 위와 같은 오류가 뜬다. SSR로 동작하기 때문에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. className 일관 되게 만들어주기 1. babel-plugin-styled-components 설치하기 2. .babelrc 파일 루트에 만들어서 아래 내용 추가하기 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 2023. 1. 11. Recoil context API context api 단점은 context를 구독하고 있는 하위의 모든것이 재 랜더링 된다. 성능상 문제가 생길 수 있음 낮은 빈도의 업데이트에 적합하다. (정적인 값, 구독을 통해 업데이트를 전파하는 것) 한계 상태 공유를 위해 상위요소까지 끌어올리면 트리가 다 재렌더 될수도있다. context는 단일 값만을 저장할 수 있고, 자체 Consumer를 자기는 여러가지 집합은 담을 수 없다. 최상단부터 트리의 잎까지 코드 분할이 어렵다. Redux한계 store는 외부 요인으로 취급되기때문에 React의 내부 스케줄러에 접근 할 수 없다. Recoil은 내부적으로 React의 상태를 사용하고 있다. 또한 많은 보일러플레이트 코드를 사용해야한다. 그리고 비동기 데이터 처리 또는 계산된 .. 2022. 9. 24. React Transition Group 적용 중 이슈사항 TransitionGroup와 CSSTransition 적용 해보았음 {showingList.map((item: any, index: number) => ( {/* animation 설정 _global.css */} ))} .item-enter-active { opacity: 0 !important; } .item-enter-done { opacity: 1 ; transition: opacity 500ms ease-in; } .item-exit { opacity: 1 !important; } // .item-exit-active { // opacity: 0 !important; // transition: opacity 500ms ease-in; // } // .item-exit-done { // opac.. 2022. 7. 2. 이전 1 2 3 4 ··· 8 다음 반응형
