React-lifecycle-methods

로직 구현중

react-lifecycle-methods

이해를 못했던 부분은 항상 코드로 쓰여지는 것들은(함수,html등) 브라우저상에 보여졌는데 해당 메서드는 도대체 어떤기능을 하는지 스스로 이해가 가지않았다.

"공식문서에서는 컴포넌트의 생명주기 메서드라고 표현하였다"

✏️ componentDidMount

컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다

• 최초 렌더링에 실행되는 메서드
• 로직에 보이지 않아도 이미 브라우저에 실행되고 있는 메서드

📍 외부에서 데이터를 불러와야 한다면(컴포넌트가 마운트된 직후 동시 실행하고싶을때), 네트워크 요청을 보내기 적절한 위치이다.⬇️ (아래 예시)

  componentDidMount() {
    fetch("/data/FeedsData.json", {method: "GET",})
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          feeds: data,
        });
      });
  }
//메서드 안에 fetch함수를 실행시켜준 상황이다

• 해당 메서드 안에 여러 fetch함수 사용가능
  

✏️ componentDidUpdate

갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.

• 최초로 렌더링된(componentDidMount) 후 실행된다.
• text그대로 첫 렌더링 이후 어떠한 것이 업데이트 되면서 실행되는 함수이다.
• 업데이트 되는 3가지 경우 New props set State() force Update()

📍주의해야할점(넘나중요)

  componentDidUpdate() {
    //해당 부분에 위에서 이야기한 3가지의 경우의 함수가 들어오면 무한 rerendering으로 인해 화면이 멈춰버림
    //하지만 3가지 이외의 것이 들어오게 되는 경우에는 사용가능
  }

너무 잘 정리되어있는 글을 보아서 가지고 와봤다