177. 사용 중인 수명 주기 방법

this 예약어가 메소드 안에서 올바르게 작동하도록 지난 강의에서처럼, bind()를 통해 바인딩을 해준다

※ bind() 의 역할은 ?

하지만 이렇게 하게 된다면 무한 루프가 만들어지게 됩니다 componentDidUpdate()가 이 컴포넌트가 변경될 때마다 실행되기 때문이죠 상태를 설정하면, 컴포넌트가 변경됩니다 따라서 함수가 재실행되고 그러면 상태 역시 다시 변경됩니다 이렇게 계속 실행되면 그 것이 무한 루프인 것이죠

 

이를 위해 componentDidUpdate()는 우리를 도와줄 두 개의 인자를 전달받습니다 각각 prevProps, 그리고 prevState입니다 즉 현재 컴포넌트의 갱신 직전 시점의 props와 스냅샷을 갖고 있는 인자입니다 그리고 이를 가지고 prevState.searchTerm이 현재의 searchTerm과 다른지 둘을 비교한다

  componenetDidUpdate(prevProps, prevState) {
    if (prevState.searchTerm !== this.state.searchTerm) {
      this.setState({
        filteredUser: DUMMY_USERS.filter((user) =>
          user.name.includes(searchTerm)
        ),
      });
    }
  }

 

 

 

조건문을 통한 확인은 componentDidMount()가 컴포넌트가 초기 렌더링될때만 실행되므로 필요가 없다 이 이후에 갱신이 이루어져도 componentDidMount()는 실행되지 않고 대신 componentDidUpdate()가 실행된다

useEffect() 함수는 항상 컴포넌트의 최초 마운트 시점에 실행된다