리액트 렌더링 최적화 관련 질문드립니다.

Question

안녕하세요. 렌더링 최적화 관련해서 질문드립니다. const [ modal , setModal ] = useState ( false ); const modalOpen = useCallback ( () => { setModal ( true ); }, [ modal ] ); const modalClose = useCallback ( () => { setModal ( false ); }, [ modal ] ) return ( < div > < Container > < Row > < Col sm = { 12 } md = { 6 } > < WorkList /> < Col sm = { 12 } md = { 6 } > < BoardList opens = { modalOpen } /> < Row > < Col sm = { 12 } md = { 6 } > < OrderChart /> < Modal show = { modal } onHide = { modalClose } size = "lg" centered > < Modal.Header > < Modal.Title > test < Modal.Body > test < Modal.Footer > < Button variant = "secondary" onClick = { modalClose } > Close ); 위 컴포넌트에서 모달을 띄우는것인데 BoardList 컴포넌트에서 모달을 여는 useState함수를 내려줘서 끌어올리는 방식으로 하려하는데 저 BoardList 컴포넌트가 재렌더링되고있습니다. BoardList 컴포넌트는 React.memo를 사용했으나 아무래도 모달을 열때 끌어올려져서 useState가 새로 생성되면서 props가 새로 전달되여 props가 업데이트되어서 BoardList를 재 렌더링하는 현상이 문제인거같은데 이부분을 어떻게 잡으면 좋을까요?

제로초(조현영) · Answer

opens={modalOpen}가 바뀌어서 리렌더링 되는 것인데요. 해당 prop을 부모에서 받는게 아니라 BoardList에서 리덕스같은 글로벌 컨텍스트로 처리해야 할 것 같습니다. props가 전달되는 이상 막기 어렵습니다.