50일차 (CS 25, 26)

라이프사이클 메서드란

 라이프사이클 메서드란 React 클래스 컴포넌트에서 생명 주기 동안 발생하는 여러 단계에서 실행되는 메서드를 의미한다. 이 메서드들을 사용하면 컴포넌트가 DOM에 마운트, 업데이트, 언마운트될 때 특정한 작업을 수행할 수 있다.

 

 React의 라이프사이클은 크게 세 가지 단계로 나눌 수 있다. 첫 번째는 마운트 단계로 컴포넌트가 처음으로 DOM에 생성되고 삽입될 때 실행되는 단계이다. 이 단계에서는 초기 state를 설정할 수 있는 constructor() 메서드, Props로부터 state를 도출할 때 사용되는 static getDerivedStateFromProps() 메서드, 컴포넌트를 렌더링 하는 render() 메서드, 외부 데이터를 가져오는 작업을 주로 수행하는 componentDidMount() 메서드가 있다.

 

 두 번째 단계는 업데이트로, props 또는 state의 변화로 인해 컴포넌트가 리렌더링될 때 실행되는 단계이다. 이 단계에서는 컴포넌트가 리렌더링 될 필요가 있는지 결정하는 shouldComponentUpdate() 메서드, DOM 업데이트 직전의 값을 캡처하는 getSnapshotBeforeUpdate() 메서드, 컴포넌트가 업데이트된 후에 호출되는 componentDidUpdate() 메서드가 있다.

 

 세 번째 단계는 언마운트로, 컴포넌트가 DOM에서 제거될 때 실행되는 단계이다. 이 단계에서는 이벤트 리스너 제거 등의 정리 작업을 주로 수행하는 componentWillUnmount() 메서드가 있다.

 

 

react 클래스형과 함수형의 차이 + (어떤 방식을 주로 사용하였고 그 이유가 뭔지)

 클래스형 컴포넌트는 React의 Component 클래스를 상속받아서 작성된다. 클래스형 컴포넌트는 기본적으로 라이프사이클 메서드를 사용해서 컴포넌트의 생명 주기를 관리할 수 있으며, 클래스 메서드 내에서 React 컴포넌트의 속성과 상태에 접근하기 위해 this 키워드를 사용한다.

 

 함수형 컴포넌트는 화살표 함수나 일반 함수로 작성이 된다. 함수형 컴포넌트는 useState, useEffect 등의 Hook을 사용하여 상태 관리, 라이프사이클 로직 등을 구현한다. 이러한 함수형 컴포넌트는 클래스형에 비해 코드가 간결하며, this 키워드를 사용하지 않아 가독성이 좋다.