(리액트의 컴포넌트)클래스형 컴포넌트, 함수형 컴포넌트, 훅

간단히 컴포넌트는 모듈 재사용하기 편하게 만드는 것이다.(리액트에서 컴포넌트는 앱을 이루는 최소한의 단위)

컴포넌트는 두 가지 인스턴스 속성으로 props와 state를 가지고 있다.

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 동적인 데이터를 다룰 땐 state를 사용

<컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고받고 변경되는 값은 state만큼만 확인하면 되므로 개발자가 더 편리하게 개발을 할 수 있게되었다.>

컴포넌트의 생명주기

모든 컴포넌트는 여러 종류의 "생명주기 메소드"를 가진다.

이러한 메소드를 활용하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

마운트 - 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출된다.

contstuctor()
static getDerivedStateFromProps()
render()
componentDidMount()

업데이트 - props또는 state가 변경되면 갱신이 발생한다. 컴포넌트가 리렌더링 될 때 순서대로 호출된다.

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

마운트 해제 - 컴포넌트가 DOM에서 제거될 때 호출된다.

componentWillUnmount()

자주 사용되는 함수들

▪ render()

- 클래스형 컴포넌트에서 반드시 구현해야하는 유일한 메서드이다. props와 state 값을 활용하여 값을 반환한다.

- 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야하며, 브라우저와 직접 상호작용 하지 않는다.

- shouldComponentUpdate()가 false를 반환히면 호출되지 않는다.

▪ constructor(props)

- 메서드를 바인딩하거나 state를 초기화하는 작업에서 사용된다.

▪ componentDidMount()

- 클래스컴포넌트가 마운트된 직후 호출된다.

- DOM 노드가 필요한 초기화 작업을 수행한다.

▪ componentDidUpdate(precProps, prevState, snapshot)

- 갱신이 일어난 직후 호출되며 최초 렌더링에서는 호출되지 않는다.

- 클래스컴포넌트 갱신시 DOOM을 조작할때 사용한다.

▪ componentWillUnmount()

- 클래스컴포넌트가 마운트 해제되어 제거되지 직전에 호출된다.

컴포넌트의 종류

리액트에서 정의하는 컴포넌트 종류에는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다.

[클래스형 컴포넌트]

class Welcome extends React.Component {
  render() { /*클래스형은 rende함수 필수*/
    return <h1>Hello, {this.props.name}</h1>;
  }
}

주로 함수형 컴포넌트를 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때 ES6 class를 사용한 "클래스형 컴포넌트"를 활용한다.

[함수형 컴포넌트]

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

데이터를 가진 하나의 props객체 인자를 받은 후 React 엘리먼트를 반환한다.이러한 컴포넌트는 JavaScript 함수이기 때문에 말그대로 "함수형 컴포넌트"라고 불린다.

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

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

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

함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식이 있고, ES6의 화살표 함수(arrow function) 방식도 있다. 화살표 함수의 경우 함수를 파라미터로 전달할 때 유용하다. 비슷한 점도 많지만, 두 문법이 확실하게 다르다는 점은 다음 예제를 통해서 알 수가 있다.

function BlackDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: function() {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const blackDog = new Blackdog();
blackDog.bark(); // 검둥이: 멍멍!

function WhiteDog() {
  this.name = '흰둥이';
  return {
    name: '검둥이',
    bark: () => {
      console.log(this.name + ': 멍멍!');
    }
  }
}

const whiteDog = new Whitedog();
whiteDog.bark(); // 흰둥이: 멍멍!

function()을 사용하면 검둥이가 나타나고, () => {} 를 사용하면 흰둥이가 나타난다. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.