10.03 항해 21일차 TIL

벌써 항해를 시작한지 3주가 지났다니.. 시간이 이렇게 빠르게 흐른게 뭔가 실감이 나지 않는다.
React 심화 주차에 들어오면서 이해가 안되는 개념도 많아지고 신경 써야하는게 점점 많아지다 보니 조금 벅찬 느낌도 있지만 모든 것을 즐기는 마음가짐으로 하려고 노력 하고 있다.
그래도 확실히 내가 갈망하던 것을 배우고 있으니 힘들어도 재미있고, 어려워도 꼭 해결 해보고 싶다는 생각이 들어 더 재미있는것 같다. 뭔가 게임을 공략 찾아 내면서 하는 기분이기도 하고..

아무튼 한 주를 마무리 하는 일요일이니까 중요했던 키워드를 한번 정리 해보려 한다.

라이프 사이클

React 컴포넌트는 생명 주기가 있는데, 라이프사이클(Life cycle)이라고 표현한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.

Class 컴포넌트 때는 라이프사이클이 컴포넌트에 중심이 맞춰져 있었다.

• 클래스가 마운트 되려할 때(componentWillMount)
• 마운트 되고 나서(componentDidMount)
• 업데이트 되었을 때(componentDidUpdate)
• 삭제 되었을 때(componentWillUnmount)

그러나 함수형 컴포넌트에서는 특정 데이터 에 대해서 라이프 사이클이 진행 된다.
데이터는 여러 개일 수 있으므로 Class 컴포넌트에서는 컴포넌트 당 한번씩만 사용 했다면,
함수형 컴포넌트에서 사용하는 리액트 훅인 useEffect는 데이터의 개수에 따라 여러 번 사용하게 된다.

useEffect(() => {
  console.log('target changed');
}, [target]);

위 코드는 컴포넌트가 첫 렌더링될 때 한 번 실행되고, 그 다음부터는 target이 바뀔 때마다 실행된다. 즉, componentDidMount와 componentDidUpdate가 합쳐진 셈이다.

useEffect(() => {
  console.log('target changed');
  return () => {
    console.log('target이 바뀔 예정입니다.');
  };
}, [target]);

componentWillUnmount의 역할도 담당할 수가 있는데요. return으로 함수를 제공하면 된다.

여기까진 과거 정리 해두어서 클래스형과 함수형의 차이점을 더 찾아보았다.

간단한 방식의 함수형 컴포넌트와 클래스형 컴포넌트를 선언하는 코드를 한 번 보도록 하자.

// 함수형 컴포넌트
import React from 'react';

function App() {
  const name = '함수형';
  return <div>{name}</div>;
}

export default App;


// 클래스형 컴포넌트
import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '클래스형';
    return <div>{name}</div>;
  }
}

export default App;

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하나 차이점은 있다.

클래스형

• 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다.
• render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
• 과거의 prototype을 이용해서 구현하던 클래스 문법을 ES6 문법 부터는 class 문법을 사용하여 구현할 수도 있다.

함수형

• 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다.
• 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 리액트 훅이 도입되면서 해결되었다.