[react]하위 컴포넌트에서 props변화 감지 어케할까(componentDidUpdate)

졸작으로 웹만들고 있다

 

 

상단에 다른 카테고리를 누르면 (현재 C) 

 

게시판 목록은 바뀌는데  띄워놨던 게시물 컴포넌트가 남아있다

 

메뉴를 새로 선택할 때 마다 게시판 컴포넌트를 끄고 싶다

 

 

 

 

 

상위 컴포넌트 : 에서 어떤 메뉴선택을 햇는지 state값이 바뀌고

      clickmenu: "C", // or Java  ,Python ,Javascript...

 

하위 컴포넌트 : 에서 contentOn: state값을 이용해 키고껏다가 제어한다

      contentOn: "none",

 

 

 

 

 

<BoardMete>(하위)에 무엇을 클릭했는지 전달 했다.

import BoardMete from "./boardMete"; // 게시물 컴포넌트


.
.
render(

<BoardMete clickmenu={this.state.clickmenu} />

 

 

 

 

하위컴포넌트가 props의 변화할때를 감지하고 그때 명령을 주고싶다

 

결국 이말하고 하고싶은거였다

 

 componentDidUpdate = (prevProps, prevState) => { //componentDidUpdate가 props의 변과를 감지한다
    console.log("********************************");
    if (this.props.clickmenu !== prevProps.clickmenu) { //하위컴포넌트가 받은 props값 적어주기(둘다)
      console.log("~~~~~~~~~~~~~~~~~~~~~~~~~"); 
      this.setState({
        ...this.state,
        selectTagNum: -1,
        contentOn: "none",  // 난 여기서 contntOn을 none으로 바꿔서 사라지게 햇다
      });
    }
  };

 

왜 if 조건문을 적냐면

 

변화가 감지 될 때마다 실행되기 때문에 무한루프가 돌 수가 있다

 

 

 

 

참 componentDidUpdate는 

생명주기와 관련되 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드이다

 

 

 

 

 

 

 

 

 

 

참고: 

lab.naminsik.com/3550

blog.naminsik