VamosDev의 개발 브이로그

[적용 상황]어떤 자식요소의 트리거를 위해 부모요소에서 특정 상태 또는 값을 업데이트 하니,다른 자식요소(형제요소)까지 불필요하게 리렌더링 되는 현상 발생= > 이를 해결하기 위해 "자식요소의 트리거를 자식요소 내부에서 선언하고 그 트리거만 외부로 전달하도록 함" [사용방법]1. 자식요소에서 컴포넌트를 forwardRef()로 감싼 후, props 옆에 ref를 넣는다. (ref는 임의의 명칭이 아니며, 다른 이름으로 바꿀 수 없다. 즉, 반드시 'ref'라고 기재해야 complile이 가능하다)2. useImperativeHandle을 이용하여 필요한 트리거 함수를 선언한다. ( useImperativeHandle: ref로 노출할 메서드나 값을 사용자 정의할 수 있게 해줌, 보통 ref를 붙이면..

[문제점]자식요소에서 부모요소에서 상태관리 중인 배열을 참조하고 있고,배열의 상태 조작 시(값 변경 시),해당 상태를 참조하고 있는 자식 요소 전체가 불필요하게 리렌더링 되는 상황이 발생함.(해당 원소를 참조하는 카드만 리렌더링되어야 함) 예)const ParentComponent = () => { const [list, setList] = usetate() // list의 원소 하나만 바뀌어도 모든 ChildrenCard가 리렌더링 됨. return ( {storeData.map((v: any, i: any) => ( )} )} [탐구과정] 1. Chat GPT에게 열심히 물어봤는데, 리액트는 값의 변화를 감지하기 때문에..