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

신호등 모양을 출력하는 컴포넌트 작성하기

- App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트를 포함

- TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포넌트 3개를 포함

- Lamp 컴포넌트는 색상과 크기를 부모 컴포넌트로부터 전달받아서 해당 색상과 크기의 원을 출력

- 100px의 붉은색 동그라미를 출력 => <div style ={{width:100, height : 100, borderRadius : 50, bacgroundColor : 'red'}} />

 

1)  App.js 에 신호등 만들기

function App() {
  return (
    <>
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'red'}} />
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'yellow'}} />
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'green'}} />
    </>
  );
}

export default App;

2) TrafficLight.js 생성하여 App.js 에서 사이즈 전달하기

App.js 

import TrafficLight from './trafficLight/TrafficLight';

function App() {
  return (
    <>
      <TrafficLight size={100}/>
    </>
  );
}

export default App;

TrafficLight.js

function TrafficLight({size}){

    return(
        <>
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'red'}} />
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'yellow'}} />
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'green'}} />        
        
        </>
    );
}

export default TrafficLight;

3) Lamp.js 생성하여 부모 컴포넌트에서 사이즈 와 색상 전달받기

TrafficLight.js

import Lamp from './Lamp'

function TrafficLight({size}){

    return(
        <>
            <Lamp size={size} color='red'/>
            <Lamp size={size} color='yellow'/>
            <Lamp size={size} color='green'/>
        
        </>
    );
}

export default TrafficLight;

Lamp.js

function Lamp({size,color}){

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

export default Lamp;

4) App.js 파일에서 색상을 배열로 넘겨주고 TrafficLight.js 에서 map함수 사용하여 변경

App.js

import TrafficLight from './trafficLight/TrafficLight';

function App() {
  const tlSize = 100;
  const tlColors = ['red', 'yellow', 'green'];

  return (
    <>
      <TrafficLight size={tlSize} colors = {tlColors}/>
    </>
  );
}

export default App;

TrafficLight.js

import Lamp from './Lamp'

function TrafficLight({size,colors}){

    return(
        <>
            {
                colors.map(color => <Lamp size = {size} color = {color}/>)
            }

            {/* <Lamp size={size} color='red'/>
            <Lamp size={size} color='yellow'/>
            <Lamp size={size} color='green'/> */}
        
        </>
    );
}

export default TrafficLight;

Lamp.js

function Lamp({size,color}){

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

export default Lamp;