★[프론트엔드 기초]React + TypeScript (10) - props

props 

: 컴포넌트 간에 데이터를 넘길때 사용

 

//MyWeather.tsx

import React from 'react';

interface MyProps {
    weather: string;
}

const MyWeather: React.FC<MyProps> = (props) => {
    return (
        <div>
            오늘의 날씨는 {props.weather}입니다.
        </div>
    );
};

export default MyWeather;

 

//App.tsx

import './App.css';
import Todolist from './Todolist';
import Clock from './Timer';
import MyWeather from './MyWeather';


function App() {

  let name = '리액트';

  return (
    <div className='container'>
      <Todolist></Todolist>
      <MyWeather weather="맑음"></MyWeather>
    </div>
  );
}

export default App;

 

 

children 

//App.tsx

return (
    <div className='container'>
      <Todolist></Todolist>
      <MyWeather weather="맑음">일기예보</MyWeather>
    </div>
  );
}

위 코드에서 일기예보는 children이라는 것이다. children이라는 것을 사용하기 위해서는 인터페이스에 추가를 해줘야 한다.

 

//MyWeather.tsx

import React from 'react';

interface MyProps {
    weather: string;
    children : React.ReactNode;
}

const MyWeather: React.FC<MyProps> = (props) => {
    return (
        <div>
            {props.children} <br />
            <br />
            오늘의 날씨는 {props.weather}입니다.
        </div>
    );
};

export default MyWeather;


//더 간결하게 
 const MyWeather: React.FC<MyProps> = ({ children, weather }) => {
     return (
         <div>
             {children} <br />
            <br />
             오늘의 날씨는 {weather}입니다.
         </div>
     )
 }

 

children +클래스형 컴포넌트 사용

import React, { Component } from 'react'

interface MyProps {
    weather: string;
    children : React.ReactNode;
}

class MyWeather extends Component<MyProps> {
    render() {
        const{children, weather} = this.props;

        return (
            <div>
             {children} <br />
            <br />
             오늘의 날씨는 {weather}입니다.
            </div>
        )
    }
}
export default MyWeather;

 

 

---

모달 대화상자 이용

https://react-bootstrap.netlify.app/docs/components/modal/

Modals | React Bootstrap

사이트 내 코드에서 필요한 부분 가져다쓰기