본문 바로가기

✘✘✘ React3

[React] 자주 변경되는 컴포넌트 최적화: style 이 컴포넌트 스타일을 이 패널을 사용해 커스텀 하는 기능을 개발 하던 중 Over 200 classes were generated for component ColorPicker__ColorBox with the id of "ColorPicker__ColorBox-sc-189ed6b7-1". 이런 경고가 나왔고 아래 방식으로 styled component를 사용할 것을 권장한다고 했다. Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.backg.. 2023. 7. 14.
React Life cycle: 언제 state 하면 안 될까? 라이프 사이클 다이어 그램 React 구성 요소에서는 예기치 않은 동작이나 무한 루프를 방지하기 위해 특정 수명 주기 메서드에서 상태 또는 소품 업데이트를 피해야 합니다. 다음은 다양한 수명 주기 메서드에서 상태 또는 소품을 업데이트하지 않는 경우에 대한 몇 가지 지침입니다. constructor: 생성자는 구성 요소가 생성될 때 호출되며 그 목적은 상태 및 바인딩 메서드를 초기화하는 것입니다. 예기치 않은 동작이 발생할 수 있으므로 여기에서 상태 또는 소품을 업데이트하지 마십시오. shouldComponentUpdate: 이 메서드는 구성 요소가 소품 또는 상태의 변경 사항을 기반으로 다시 렌더링해야 하는지 여부를 결정하는 데 사용됩니다. 무한 재렌더링 루프가 발생할 수 있으므로 이 메서드에서 상태 또.. 2023. 4. 8.
[React] useId():: 컴포넌트 별 고유한 아이디 생성 import { useId } from 'react-id-generator'; function List({ items }) { const id = useId(); return ( {items.map((item, index) => ( {item} ))} ); } function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ; } 2023. 4. 8.