[TIL] 20.11.15

🧐 님 오늘 뭐했음?

• 웹 게임을 만들며 배우는 React
  5-1. 리액트 라이프사이클 소개

🌱 알게 된 사실

• 클래스 형태로 코드를 작성할 경우 : class JsxName extends Component하고 리액트 데브 툴로 성능 체크를 했을 때 성능에 문제가 있을 것 같으면 pureComponent로 바꿔보자.

아래의 함수들은 컴포넌트의 라이프사이클 메서드이다.

• componentDidMount() : 컴포넌트가 맨 처음으로 렌더링 된 후에 실행됨. 여기서 setTimeout, setInterval과 같은 비동기 작업을 요청함.
• componentWillUnmount() : 컴포넌트가 제거되기 직전에 실행됨
• componentDidUpdate() : 컴포넌트가 리렌더링을 완료한 후에 실행됨

클래스형 컴포넌트의 라이프사이클 : constructor -> render -> ref -> componentDidMount -> (setState/props 바뀌면 shouldComponentUpdate(true) -> render -> componentDidUpdate)

✨ 느낀점은?

책으로 공부할 때 리액트에 라이프사이클이라는게 있다는걸 읽고 슥 넘겼는데, 실제 코드에서 어떻게 적용되는지 보면서 알게 되니까 더 좋은 것 같다!