React - lifecycle

ryan·2022년 4월 25일
0

리액트 라이프 사이클

  1. 컴포넌트가 렌더링이 되고 DOM에 적용되는 순간에 특정 동작을 수행할 수 있다.(render()가 실행되면 리액트가 JSX를 DOM에다가 적용해줌)

  2. 3가지 특정 동작을 통해 리액트 라이프사이클을 관리할 수 있다.

  • componentDidMount : '첫' 렌더 성공적으로 실행된 경우 실행되는 함수(setState등으로 렌더링이 다시 일어나면 실행안됨.)
  • componentWillUnmount : 컴포넌트가 제거되기 직전에 실행되는 함수

실행 순서(class) : constructor > render > ref > componentDidMount > setState,props 바뀔 때 shouldComponentUpdate(true일 경우) > render > componentDidUpdate > 부모가 자식 컴포넌트 없애면 componentWillUnmount > 소멸

class App extends Component {
  state = {
    result: '',
  };
  componentDidMount() {} // 비동기 요청을 많이 함
  componentDidUpdate() {} // 리렌더링 후에 실행됨.
  componentWillUnmount() {} // 부모 컴포넌트에 의해서 제거될 때  // 비동기 요청 정리
  render() {
    return (
      <>
      </>
    );
  }
}
profile
프론트엔드 개발자

0개의 댓글