카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

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

21.06.10 11:18 작성 조회수 317

안녕하세요. 렌더링 최적화 관련해서 질문드립니다.

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를 재 렌더링하는 현상이 문제인거같은데 이부분을 어떻게 잡으면 좋을까요?