함수 컴포넌트와 클래스 컴포넌트
함수 컴포넌트는 클래스 컴포넌트보다 더 간결하고 렌더링 성능도 좋아 최근에 많이 사용되지만,
클래스 컴포넌트는 함수 컴포넌트에서는 지원하지 않는 다양한 생명주기 이벤트 훅들이 제공되기 때문에 반드시 알아두는 것이 좋다.
클래스 컴포넌트 작성 방법
리액트 클래스 컴포넌트는 React.Component<PropsType, StateType>을 상속받도록 작성
만일 속성이나 상태를 사용하지 않는다면 제네릭 문법 부분을 생략하거나 {}와 같이 비어있는 객체로 지정가능
React 클래스 컴포넌트의 기본적인 형태
import React, { Component } from 'react'
// 속성의 타입
type Props = {}
// 상태의 타입
type State = {}
export default class Test extends Component<Props, State> {
state = {}
render() {
return (
<div>Test</div>
)
}
}속성만 사용하는 React 클래스 컴포넌트의 형태 예
import React, { Component } from 'react'
type TestProps = {
name: string;
age: number;
}
export default class Test extends Component<TestProps> {
render() {
return <div>{this.props.name}님의 나이는 {this.props.age}입니다.</div>;
}전달받은 속성은 this.props.name과 같이 this 식별자를 이용해 컴포넌트 인스턴스의 props 속성을 이용
상태는 this.state.name 형식으로 접근가능
상태만 사용하는 React 클래스 컴포넌트의 형태 예
import React, { Component } from 'react'
type TestState = {
name: string;
}
export default class Test extends Component<{ }, TestState> {
state: TestState = {
name: "홍길동",
};
render() {
return <div>이름은 {this.state.name}입니다.</div>;
}
}속성으로 함수, 메서드를 전달하는 경우
import React, { Component } from 'react'
type Props = {
formatString: string;
changeFormat: (format: string) => void;
//changeFormat: Function;
};
export default class Test extends Component<Props> {
render() {
return (
<div>
<button onClick={(e)=>this.props.changeFormat("HH:mm:ss")}>적용</button>
</div>
);
}
}속성으로 함수와 메서드를 전달할 때는 함수 컴포넌트의 속성을 정의할 때와 마찬가지로 (format: string) => void와 같은 형태를 사용
만일 인자 형식과 리턴값의 형식을 알 수 없다면 Function을 지정
생명주기 메서드
생명주기 메서드(life cycle method)는 리액트 클래스 컴포넌트에서만 사용할 수 있으며, 함수 컴포넌트에서는 useEffect()라는 리액트 훅을 이용해 유사한 기능을 구현할 수 있음
-
컴포넌트가 마운트(mounting)될 때
리액트 컴포넌트가 애플리케이션의 컴포넌트 트리에 추가되어 브라우저 화면에 나타날 때의 단계별 생명주기 메서드 -
컴포넌트가 업데이트(updating)될 때
리액트 컴포넌트의 상태, 속성이 변경되어 브라우저 화면이 갱신될 때의 단계별 생명주기 메서드 -
컴포넌트가 언마운트(unmounting)될 때
리액트 컴포넌트가 애플리케이션의 컴포넌트 트리에서 제거되어 브라우저 화면에 사라질 때의 생명주기 메서드
컴포넌트가 마운트 될 때
cunstructor(생성자)
컴포넌트가 생성될 때 호출되는 생명주기 메서드
생성자에서는 반드시 super(props)를 호출해야 하며, 그렇지 않으면 컴포넌트에서 속성(props)를 사용할 수 없으므로 에러가 발생
생성자는 this.state에 객체를 할당하여 컴포넌트의 상태(state)를 초기화하기 위해 작성한다.
따라서 생성자 내부에서는 상태를 초기화만 할 수 있으며 this.setState() 메서드를 이용해 상태를 변경해서는 안됨
상태를 초기화 할 일이 없다면 생성자를 작성하지 않아도 됨
constructor(props) {
this.state = { name: "홍길동", age: 20 }
}타입스크립트 언어에서는 constructor를 사용하면 this.state 속성의 타입을 지정할 수 없어서 constructor를 사용하더라도 any 타입을 사용해야하므로 권장하지 않음
대신 클래스 내의 state 인스턴스 멤버를 지정하는 방법을 사용하는 경우가 더 많다.
import React, { Component } from 'react'
type StateType = {
name: string;
age: number;
};
export default class Test extends Component<{ }, StateType> {
state: StateType = { name: "홍길동", age: 20 };
render() {
const { name, age } = this.state;
return <div> {name}님의 나이 : {age}</div>;
}
}getDerivedStateFromProps 정적 메서드
컴포넌트의 상태가 부모 컴포넌트로부터 전달받은 속성에 의해 달라지는 경우에 사용
정적 메서드이므로 반드시 static 키워드를 지정해야 하며, props와 state 두 개의 인자를 전달 받음
props는 전달받은 속성 객체이며 state는 컴포넌트의 기존 상태이다.
그리고 props를 이용해 새로운 상태를 만들어서 리턴함
일반적으로 전달받은 속성을 그대로 사용하기 때문에 이 생명주기 메서드를 사용할 일은 그다지 많지 않지만 정말 필요할 때를 대비해 사용 방법을 숙지해 놓을 것
render 메서드
컴포넌트를 가상 DOM으로 렌더링하는 메서드
상태와 속성을 이용해 리액트 엘리먼트 등으로 렌더링하며, 함수 컴포넌트의 리턴문 부분에 해당한다.
이 함수는 상태와 속성이 변경되지 않았다면 같은 결과를 리턴해야 한다.
componentDidMount 메서드
컴포넌트의 마운트가 완료되고 나서 브라우저 DOM의 트리에까지 반영된 후 호출되는 메서드
따라서 브라우저 DOM이 완성된 후에 실행해야 하는 초기화 작업을 하기에 적합
예를 들어 HTTP로 백엔드 API를 호출하여 그 결과를 받아서 this.setState() 메서드로 상태를 변경하고 브라우저 DOM에 출력해야 하는 초기화 작업이 필요하다면 이 생명주기 메서드를 이용할 수 있음
컴포넌트가 업데이트 될 때
