Class Component
클래스 컴포넌트를 알아보기 전에 클래스의 개념에 대해 먼저 알아보자.
클래스란?
클래스를 예시로 들 수 있는 것들이 주변에 많이 있는데, 물건 만드는 설명서나 붕어빵 틀 등이 있다.
이들의 공통점은 무언가를 만들 때 반복적인 작업을 최소화해준다라는 것이다.
간단한 사용법으로
class 붕어빵{
// 붕어빵 만드는 방법
}
// 위와 같이 붕어빵 틀을 만들어 놓고,
new 붕어빵();
// 이렇게 new 연산자와 함께 함수 호출하듯이 선언해주면
// 따끈따끈?한 붕어빵이 만들어진다.new연산자를 보니, 이전에 어떻게 작동되는지 모르고 유용하게 썼던 Date객체가 떠올랐다.
class Date{
getFullYear(){
// 년도 추출 기능
}
...etc
const date = new Date();
const year = date.getFullYear();현재 년도를 뽑아오기 위해 new Date().getFullYear() 메서드를 많이 사용했었는데, 클래스로 만들어진 자바스크립트 내장 Date객체를 쓰고 있었던 것 같다.
클래스에서 뽑아와서 변수에 담으면(위의 예시에선 year) 그것을 instance라고 부르기도 한다.
백엔드에서 api들을 모아서 class에 담는 것으로 그룹화하여 사용하는 것이 일반적이다.
위와 같이 프로그래밍하는 것을 OOP ( Object - Oriented - Programming ) 객체지향 프로그래밍이라 부른다.
자 클래스는 대충 뭔지 훑어봤고 그럼
클래스형 컴포넌트는 무엇인가?
이때까지는 함수형으로 컴포넌트를 만들었었다. 하지만 예전엔 함수형 컴포넌트는 존재하지 않았고, 클래스형 컴포넌트만이 존재했었다.
클래스로 컴포넌트를 만들어서 화면에 렌더링되는 것까지 기존에 사용하던 함수형 컴포넌트와는 다른 조건들이 필요하다.
JSX return
리액트에서 사용하는 클래스형 컴포넌트는 기본적으로 render(){}라는 내장 함수를 제공해주는데, 이 안에 함수형 컴포넌트와 같이 return문을 사용해주어야 하고, 클래스에 react의 Component를 import해서 extends로 상속시켜주는 것 까지 완료되면 화면에 렌더링이 가능해진다.
예시를 들어보자.
import {Component} from 'react';
export default class MyApp extends Component {
render(){
return <div>hello world!</div>;
}
}react에서 받아온 Component모듈 안에는 리액트에서 클래스형 컴포넌트 내부에서 사용할 수 있는 state, setState()와 같은 여러가지 기능들이 들어있다.
this
클래스형 컴포넌트의 최상단에 선언된 것들은 전부 this가 앞에 생략되어 있다고 생각하면 쉽다. 다른 곳에서 접근하고 싶을 때 this.변수명으로 접근하면 된다.
주의해야할 점이 있는데, 이 this는 this를 실행시킨 주체에 따라 가리키는 대상이 달라진다.
가리키는 대상을 고정시키기 위해서는 bind메서드를 사용하거나 this를 사용하는 함수를 함수 선언식이 아닌 화살표 함수로 바꿔주면 된다.
Component-Lifecylcle
컴포넌트 생명주기란, 쉽게 말해서 해당 컴포넌트가
처음 렌더링될 때, 변경될 때, 사라질 때까지의 주기를 말한다.
함수형 컴포넌트를 쓸 때는 딱히 신경쓰지 않고 코드를 작성했지만, 클래스형 컴포넌트 사용법을 배우게 되면서 컴포넌트 생명주기를 알게 되었다.
클래스형 Component 모듈에는 컴포넌트 생명주기에 관한 메서드가 총 3가지가 존재한다.
class MyApp extends Component {
componentDidmount() {
// 컴포넌트가 처음 렌더링될 때 실행
}
componentDidUpdate() {
// 컴포넌트 변경 시, 변경 후 실행
}
componentWillUnmount() {
// 컴포넌트가 사라질 때, 사라지기 직전에 실행
}
}이름이 직관적이어서 좋은 것 같다...😋
함수형 컴포넌트에서는 위 메서드를 사용하는 대신 useEffect()를 사용해서 컴포넌트 생명주기를 관찰할 수 있다. useEffect hook이 선언된 컴포넌트는 첫 렌더링 시 useEffect()가 호출된다
(class 컴포넌트의 componentDidmount())
그리고 useEffect 내부에는 dependencies array를 줄 수 있는데, 빈 배열로 설정하면 첫 렌더링 시에만 실행되고, 변수를 넣게 되면 해당 변수가 변경될 때 마다 변경 후 useEffect()가 호출된다
(class 컴포넌트의 componentDidUpdate())
마지막으로 useEffect()내부에서 return을 사용해서 반환할 함수를 정할 수 있는데 이 함수는 컴포넌트가 사라질 때 사라지기 직전에 실행된다. 이 함수는 clean up(클린업) 함수라 불린다.
(class 컴포넌트의 componentWillUnmount)
위에서 다뤄본 세 가지가 클래스형 컴포넌트와 함수형 컴포넌트의 대표적인 차이이다.
함수형 컴포넌트가 클래스형 컴포넌트에 비해 JSX를 리턴할 때 추가적인 메서드가 필요하지 않고 변수에 접근할 때 this를 쓰지 않아도 되어서 간결하고 읽기 쉽다는 장점이 있다.
하지만 생명주기 부분에서는 클래스형 컴포넌트는 딱 세 가지 메서드로 정해져있지만, 함수형 컴포넌트는 useEffect 훅을 사용해서 생명주기를 관측하는 것이 복잡하다는 단점이 있다.
