[React] 컴포넌트(Component)와 컴포넌트의 상태(State)

React에서 페이지를 구성하는 것은 컴포넌트(Component)들 입니다. 컴포넌트를 만들기 위해서 함수(function)을 사용할 수도 있고 클래스(class)를 사용할 수도 있습니다. 두 가지를 섞어서 사용할 수도 있다고 합니다. 여기서는 기본적인 컴포넌트 사용법을 알아 봅니다.

 

함수형 컴포넌트

 

함수를 사용하여 컴포넌트를 만듭니다. 또한 컴포넌트에서 사용되는 데이터를 다루는 방법을 알아봅니다. 

 

1. 컨포넌트 선언하기

 

function App() {
    const name = "React";
    return <h1>Hello {nameame}!</h1>;
}

export default App;

 

컴포넌트가 되는 함수 App() 를 정의했습니다. 컴포넌트는 화면에 보여질 요소인 JSX를 반환합니다. 보통은 컴포넌트  하나를 하나의 모듈 파일로 만들므로 export 합니다.

 

2. 상태와 상태 변경하기

 

컴포넌트 내에서 사용자와의 상호작용 또는 프로그램적으로 유지 관리되는 데이터를 다루기 위해서 useState() 를 사용합니다.

 

import { useState } from "react";

function App() {
    // useState로부터 구조분해 할당으로 변수와 변경 함수를 받습니다.
    const [ name, setName ] = useState("React");
    
    // 클릭 이벤트 처리기로 name을 변경합니다.
    // 여기서는 화살표 함수이지만 일반 함수도 됩니다.
    const onClickChange= () => setName(name + ", Java");
    
    return (
        <div>
            <h1>Hello {name}!</h1>
            <button onClick={onClickChange}>Java</button>
        </div>
    );
}

export default App;

 

React에서 상태를 다루는데 있어서 클래스 타입의 컴포넌트가 더 간편하다고 합니다. 함수형태에서 상태를 다루는 것은 State Hook이라고 하는데, React 16.8버전에서 추가되었다고 합니다.

 

클래스형 컴포넌트

 

클래스 타입 컴포넌트는 Component 클래스를 상속해서 만듭니다. 그리고 화면에 보여질 오소는 멤버 함수인  render() 에서 반환합니다. TypeScript에서 컴포넌트의 상태를 다루기 위해서 type 지정을 사용하는 방법과 interface를 사용하는 방법이 있습니다.

 

1. 컨포넌트 선언하기

 

import { Component } from "React";

class App extends Component {
    render() {
        const name = "React";
        return <h1>Hello {name}!</h1>;
    }
}

export default App;

 

2. type 지정과 생성자를 사용한 상태 처리

 

import { Component } from "react";

// 컴포넌트간 데이터 전송에 사용되는 타입
type AppProps = {};

// 상태 관리에 사용되는 타입
type AppState = { name: string };

// 제네릭을 사용해서 위 타입을 사용함을 지정합니다.
class App extends Component<AppProps, AppState> {

    // 생성자 입니다
    constructor(props: AppProps) {
        super(props);

        // 상태를 초기화 합니다.
        this.state = { name: "React" };

        // 이벤트 처리기로 바인딩합니다.
        this.onClickChange = this.onClickChange.bind(this);
    }

    // 이벤트 처리기를 만듭니다.
    // this.setState()를 사용해서 상태를 변경합니다.
    onClickChange() {
        this.setState((preState:AppState, props:AppProps) => {
            return {name:preState.name + ", Java"};
        });
    }

    // 상태를 출력하는데 this.state.name을 사용했습니다.
    render() {
        return (
            <div>
                <h1>Hello {this.state.name}!</h1>
                <button onClick={this.onClickChange}>Java</button>
            </div>
        );
    }
}

export default App;

 

2. interface와 생성자를 사용하지 않는 상태 처리

 

import { Component } from "react";

// 컴포는트간 데이터 전달을 위한 인터페이스입니다.
interface AppProps { }

// 상태를 위한 인터페이스 입니다.
interface AppState { name: string }

class App extends Component<AppProps, AppState> {
    // 생성자 없이 상태를 초기화 합니다.
    state:AppState = { name: "React" };

    // 이벤트 처리기로 바인딩한다(화살표 함수는 자동 바인딩).
    onClickChange = () => {
        this.setState((preState:AppState, props:AppProps) => {
            return {name:preState.name + ", Java"};
        });
    }

    render() {
        // 상태를 구조 분해 할당으로 받습니다.
        const { name } = this.state;
        return (
            <div>
                <h1>Hello {name}</h1>;
                <button onClick={this.onClickChange}>Java</button>
            </div>
        );
    }
 }
 
 export default App;