React #3 (컴포넌트)

 

 

클래스 컴포넌트

 

src/ClassCompnent.tsx

import { Component } from "react";

type ClassComponentProps = {
    href: string;
    text: string;
}

export default class ClassComponent extends Component<ClassComponentProps> {
    render() {
        // const href = this.props.href;
        // const text = this.props.text;
        const { href, text } = this.props; 

        return (
            <li>
                <a href={href}>
                    <p>{text}</p>
                </a>
            </li>
        )
    }
}

 

 

 

 

함수 컴포넌트 (일반형)

 

- 상용구 코드가 없음. render 없음.

 

src/FuncComponent.tsx

export default function App () {
    return <h1>function component</h1>
}

 

src/App.tsx

// import React from 'react';
// import logo from './logo.svg';
// import './App.css';
// import * as D from './data'


export default function App() {
    return <div>Hello function component!</div>
}

 

(※ 복습 겸 예시로 하는 거라 따로 프로젝트 폴더 만들어서 진행 했습니다.)

 

 

 

 

 

 

함수 컴포넌트 (화살표) 

 

 - App이라는 변수에 익명 함수를 설정하는 방식으로 구현,

 

src/ArrowComponent.tsx

import type { FC } from 'react';
// import { Component } from "react";


type ArrowComponentProps = {
    href: string;
    text: string;
}

export const ArrowComponent: FC<ArrowComponentProps> = (props) => {
    const { href, text } = props;
    return (
        <li>
            <a href={href}>
                <p>{text}</p>
            </a>
        </li>
    )
}

 

 

 

※ 클래스 컴포넌트 & 화살표 함수 컴포넌트

 

src/App.tsx

import React from 'react';
import './App.css';
// import * as D from "./data";
import { Component } from 'react';
import ClassComponent from './ClassComponent';
import { ArrowComponent } from './ArrowComponent';




export default class App extends Component {
  render() {
    return (
      <ul>
        <ClassComponent href="https://www.google.com" text="go to Google" />
        <ArrowComponent href="https://www.twitter.com" text="go to Twitter" />
      </ul>
    )
  }
}