(항해99) 회고일지(5주차)

LifeCycle

• 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다.
  

라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount)로 나눠진다.

• Mount: 처음 컴포넌트를 불러와서 생성하는 단계
• Update: 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계
  1)props가 바뀔 때
  2)state가 바뀔 때
  3)부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  4)강제로 업데이트 했을 때 (forceUpdate())
• Unmount: 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계
  리액트의 컴포넌트들은 위 순서에 따라 생성되고 업데이트되고 사라지는 생명주기를 갖는다.

다음으로, 라이프사이클과 관련하여 클래스형 컴포넌트에서 사용할 수 있는 라이프사이클 메서드에 대해서 정리해보자.

클래스형 vs 함수형 (react hooks)

1. constructor
   component의 생성자 메소드이다. 컴포넌트가 생성되면 제일 먼저 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.

class Example extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}

함수형에서는 useState 훅을 이용하여 state를 설정할 수 있다.

const Example = () => {
const [count,setCount] = useState(0);
}

2. render
   컴포넌트를 렌더링하는 메서드이다.

// Class
class Example extends React.Component {
render() {
return

Component

}
}

함수형 컴포넌트에서는 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.

const example = () => {
return

Component

}

3. componentDidMount
   컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메서드이다. 이 메서드가 호출될 때는 컴포넌트가 화면에 나타나있는 상태이다.
   여기에서 ajax 요청, 이벤트 등록, 함수 호출, 외부 API요청 등 작업을 처리한다.

// Class
class Example extends React.Component {
componentDidMount() {
...
}
}

함수형 컴포넌트에서는 useEffect 훅을 이용하여 componentDidMount와 componentDidUpdate, componentDidUnmount까지 나타낼 수 있다.

const Example = () => {
useEffect(() => {
...
}, [] ); // dependency array[]
}

Dependency Array
useEffect메서드의 두번째 인자이다.
dependency array를 비우면 컴포넌트가 처음 나타날 때에만 useEffect 에 등록한 함수가 호출된다.
dependency array에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. dependency array안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.

4. componentDidUpdate
   리렌더링을 완료한 후 변화가 모두 반영된 뒤 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 할 수 있다. 매개변수로 prevProps와 prevState있는데 이는 각각 업데이트 되기 전 props, state이다.

// Class
class Example extends React.Component {
componentDidUpdate(prevProps, prevState) {
...
}
}
5. componentDidUnmount
컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 한다. (e.g. removeEventListener) 만약에 setTimeout 을 걸었다면 clearTimeout 을 통하여 제거를 한다. 추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출한다.

// Class
class Example extends React.Component {
coomponentWillUnmount() {
...
}
}

함수형 컴포넌트에서는 useEffect()메서드의 return 부분에 Unmount할 때 정리할 메서드 cleanUp메서드를 적어주면 된다.

const Example = () => {
useEffect(() => {
return () => {
...
}
}, []);
}