React Practice - 함수형 Component 사용하여 생성한 신호등 클래스형 Component로 변경해보기

https://kalswn.tistory.com/17

React Practice - 함수형 Component 사용하여 _ 신호등 만들기

함수형 컴포넌트로 생생했던 신호등을 클래스형 컴포넌트로 변경해보기!

TraffiLight.js

import {Component} from 'react';
import Lamp from './Lamp'

class TrafficLight extends Component {

    render(){
        const {size, colors} = this.props;
        return(
            <>
            {
                colors.map(color => <Lamp size = {size} color = {color}/>)
            }
            </>
        )
    }

}

// function TrafficLight({size,colors}){
//     console.log(size,colors);
//     return(
//         <>
//             {
//                 colors.map(color => <Lamp size = {size} color = {color}/>)
//             }
        
//         </>
//     );
// }

export default TrafficLight;

Lamp.js

import { Component } from "react";

class Lamp extends Component{
    render(){
        const {size, color} = this.props;
        return(
            <>
                <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
            </>
        );
    }
}

// function Lamp({size,color}){
//     return(
//         <>
//             <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
//         </>
//     );
// };

export default Lamp;

 

	함수형 Component	클래스형 Component
변수 선언	function TrafficLight({size,colors}){ ... }	class TrafficLight extends Component{     render(){         const {size,colors} = this.props;         ....}