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