Chapter3_1 - 클래스형 컴포넌트

코딩크리처 2024. 6. 27. 09:15

클래스형 컴포넌트

앞에서 보았던 App 컴포넌트는 함수형 컴포넌트입니다.
다른 컴포넌트 선언 방식인 클래스형 컴포넌트를 작성 해 볼 겁니다. - Typescript

//위에 항상 들어가야 합니다.
//import React from 'react'
// (...)
import { Component } from 'react'

class App extends Component {
    render() : JSX.Element {
        //const name = 'react' 도 상관없습니다.
        const name : string = 'react';
        return <div className="react">{ name }</div>
    }
}
export default App;

src 디렉토리에 MyComponent.tsx 파일을 생성해 보세요.

MyComponent.tsx

const MyComponent = () : JSX.Element => {
    return <div>나의 새롭고 멋진 컴포넌트</div>;
}
export default MyComponent;

그리고 App 컴포넌트에서 MyComponent 를 불러옵니다.

App.tsx

import MyComponent from './MyComponent';

const App = () : JSX.Element => {
    return <MyComponent/>;
}
export default App;

따로 <div> 문법을 사용하지 않아도 MyComponent에서 JSX.Element 를 보내준다.
따라서 App의 리턴 값은 같다.

결과값

props 에 대해서.

간단요약

"부모 컴포넌트"가 "자식 컴포넌트"에게 값을 정해주는 것을 의미.
ex - App컴포넌트는 MyComponent를 불렀으므로,

App 컴포넌트가 MyComponent의 값을 props로 정해주는 것이 가능.

본격적인 Typescript 문법 알기!!!!

interface propFace {
    name : string;
}

or

type propFace = {
    name : string;
}

// const ({props} : propFace) = 할당받는 변수;

App 컴포넌트가 MyComponent에게 name이라는 props를 전달하게 되는데,

이 과정에서 props로 받는 타입을 지정 해 주어야 한다. - "무조건"
어짜피 Typescript를 적용하기로 한 이상, 수 천번은 쓰게 될 테니 익히는 것이 좋습니다.

적용 시간

App.tsx

// (...)
import MyComponent from './MyComponent'

const App = () : JSX.Element => {
    return <MyComponent name="React" />;
}
export default App;

MyComponent.tsx

// (...) 
interface propFace{
    name : string
}

const MyComponent = ({ props } : propFace) => {
    return <div>Hello, My name is {props.name} 입니다. </div>
}

props 의 타입을 항상 지정 해 주어야 합니다
props로 오는 값은 {name : string} 이라고 정하는 것 입니다.
any 를 사용해서 에러를 바로 없앨 수 있지만, typescript를 사용하는 의미가 없어집니다!

props 기본값 설정 : defaultProps - Typescript

typescript의 가장 중요한 규칙은 모든 변수는 정확하게 규명이 되어야 한다는 것 입니다.
defaultProps로 props로 오는 변수 중 name을 선언한다면,

App.tsx에서 name을 "props"로 보내 주지 않아도 에러가 나지 않습니다.
이는 Typescript의 장점 중 하나입니다.
어떤 상황이던, 방법이던지, 타입이 규명 된다면 에러가 나지 않습니다.
아래의 코드를 참조하시면 이해가 될 겁니다!

App.tsx

// (...)
import MyComponent from './MyComponent';

const App = () : JSX.Element => {
    return <MyComponent />;
}
export default App;

MyComponent.tsx

// (...)

interface propFace{
    name : string;
}

const MyComponent = (props : propFace) => {
    return <div>Hello, My Name is {props.name}!</div>;
};

MyComponent.defaultProps = {
    name : '기본 이름'
};

export default MyComponent;

분명 App.tsx에서 props 값으로 아무것도 보내주지 않았지만, 에러가 나지 않습니다.
이는 defaultProps의 특성으로, props 값으로 name 이 오지 않을 수 있다고 선언

한 것입니다.
이는 타입을 분명이 정해 놓아야 하지만, 자동으로 타입을 유연하게 알아 차리는
typescript의 장점입니다.

태그 사이의 내용을 보여 주는 children

props로 태그 사이에 오브젝트를 넣어 전달 해 줄 수 있습니다.
props.children으로 참조 할 수 있습니다.

App.tsx

// (...)
import MyComponent from './MyComponent';

const App = () : JSX.Element => {
    return <MyComponent>리액트</MyComponent>;
};
export default App;

MyComponent.tsx

// (...)

interface propFace{
    name : string;
    children : string;
}

const MyComponent = props : propFace => {
    return(
        <div>
            Hello, My name is { props.name } <br/>
            The Value children is { props.children }.
        </div>
    )
};
MyComponent.defaultProps = {
    name : 'default name'
};
export default MyComponent;

App.tsx에서 <MyComponent> 태그 사용 시, 사이에 string 타입이 들어갔습니다.
태그 사이의 내용은 children으로 지정 되며, 하위 컴포넌트에서 지정하면 됩니다.