[새싹 성동 2기] React로 신호등 컴포넌트 만들기

React를 사용하여 간단한 신호등(Traffic Light) 컴포넌트를 만드는 방법을 소개합니다. 이 글에서는 여러 개의 컴포넌트를 만들고, 객체 배열을 활용하여 데이터를 출력하고, 동적인 스타일링을 적용하여 신호등의 색깔을 변경하는 기능까지 구현해보겠습니다.

 

1. 신호등 컴포넌트 만들기

이제 신호등(Traffic Light) 컴포넌트를 만들어봅니다. 신호등은 빨간색, 초록색, 노란색 원을 출력하고, 각 원의 크기와 색상을 부모 컴포넌트로부터 전달받습니다.

먼저 간단한 디자인부터 시작하겠습니다.

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


export default App;

위와같이 나오는 것을 볼 수 있습니다. 이제 디자인은 되었으니 이를 컴포넌트를 만들어 넣겠습니다.

App.js 파일에서 공통된 부분을 추출해서 TrafficLight 컴포넌트를 작성하겠습니다.

TrafficLight.js

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

App.js

import TrafficLight from "./TrafficLight";

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

export default App;

이렇게 바꿔도 내용은 동일하여 위의 이미지와 같은 내용이 출력됩니다.

 

이제 원 출력 부분을 Lamp 컴포넌트로 추출하겠습니다.

Lamp.js

function Lamp({ color }) {
    return (
        <>
            <div style={{ width: 100, height: 100, borderRadius: 50, backgroundColor: color }}></div>
        </>
    );
}
export default Lamp;

TrafficLight.js

import Lamp from './Lamp';

function TrafficLight() {
    return (
        <>
            <Lamp color="red" />
            <Lamp color="green" />
            <Lamp color="yellow" />
        </>
    );
}
export default TrafficLight;

추출하여 정리만 한 것이므로 내용은 여전히 바뀌지 않습니다.

 

여기에 더해 App.js만 수정하면 사이즈를 마음대로 바꿀 수 있도록 작성해보겠습니다.

App.js

import TrafficLight from "./TrafficLight";

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

export default App;

TrafficLight.js

import Lamp from './Lamp';

function TrafficLight({ size }) {
    return (
        <>
            <Lamp size={size} color="red" />
            <Lamp size={size} color="green" />
            <Lamp size={size} color="yellow" />
        </>
    );
}
export default TrafficLight;

Lamp.js

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

 

앱에서 지정한 크기대로 출력되는 것을 볼 수 있습니다.

 

이번에는 테두리와 배경색을 추가해보겠습니다.

TrafficLight.js

import Lamp from './Lamp';

function TrafficLight({ size }) {
    return (
        <div style={{ backgroundColor: "black", margin: 10, padding: 10, border: "1px solid gray", borderRadius: 10, display: "inline-block" }}>
            <Lamp size={size} color="red" />
            <Lamp size={size} color="green" />
            <Lamp size={size} color="yellow" />
        </div>
    );
}
export default TrafficLight;

• TrafficLight 컴포넌트는 Lamp 컴포넌트를 3개 포함하고 있습니다. 각 Lamp는 color와 size를 prop으로 전달받습니다.
• Lamp 컴포넌트는 원 형태의 원을 만들어서 size와 color에 맞게 스타일을 적용합니다.

2. 신호등 타이머 설정하여 자동으로 점멸하기

이제 각 신호등이 설정된 간격으로 자동으로 색이 변경되는 기능을 추가합니다. useState와 useEffect 훅을 사용하여 타이머를 설정하고, 신호가 순차적으로 점멸하도록 합니다.

TrafficLight.js 파일 (타이머 기능 추가)

import { useEffect, useReducer, useRef, useState } from "react";
import Lamp from "./Lamp";

function TrafficLight (props) {
    // 각 신호의 점멸 여부를 상태 변수로 설정
    const [red, setRed] = useState(true);
    const [green, setGreen] = useState(false);
    const [yellow, setYellow] = useState(false);

    // 점멸 여부 계산에 사용할 변수를 선언
    const counter = useRef(0);

    // 컴포넌트가 마운트되면 타이머를 걸어서 
    // 점별 여부 계산에 사용할 카운트를 증가시키고
    // 3(램프의 개수)으로 나눴을 나머지에 따라 신호의 점멸 여부를 설정
    useEffect(() => {
        setInterval(() => {
            counter.current = counter.current + 1
            setRed(counter.current % 3 === 0);
            setGreen(counter.current % 3 === 1);
            setYellow(counter.current % 3 === 2);            
        }, props.timer);
    }, []);

    // 점멸 여부에 따라 램프의 색깔을 지정
    return (
        <div style={{backgroundColor: "black", margin: 10, padding: 10, board: "1px solid gray", borderRadius: 10, display: "inline-block"}}>
            <Lamp size={props.size} color={red ? "red" : "gray"} />
            <Lamp size={props.size} color={green ? "green" : "gray"} />
            <Lamp size={props.size} color={yellow ? "yellow" : "gray"} />
        </div>
    );
}
export default TrafficLight;

 

App.js 파일 (점멸 간격 설정)

import TrafficLight from "./TrafficLight";

function App() {
  return (
    <>
      <TrafficLight key={1} size={100} timer={3000} />
      <TrafficLight key={2} size={40} timer={2000} />
      <TrafficLight key={3} size={20} timer={1000} />
    </>
  );
}
export default App;

• TrafficLight 컴포넌트는 useState를 사용하여 각 신호의 상태를 관리합니다. 신호가 빨간색, 초록색, 노란색 순으로 점멸합니다.
• useEffect를 사용하여 타이머를 설정하고, setInterval로 일정 시간 간격으로 신호를 변경합니다.
• 각 신호의 색깔은 red, green, yellow 상태에 따라 다르게 설정됩니다.
• App.js에서는 timer prop을 통해 각 신호등이 점멸하는 간격을 조정할 수 있습니다.

3. 최종 결과

이제 각 신호등은 자동으로 점멸하면서 크기와 색을 동적으로 조정할 수 있게 되었습니다. 타이머를 통해 각 신호등의 색상이 주기적으로 변경되며, 다양한 크기와 속도로 신호등을 표시할 수 있습니다.

• 신호등은 Lamp 컴포넌트를 재사용하여 생성되고, 색상과 크기는 부모 컴포넌트에서 전달됩니다.
• setInterval로 신호의 색을 순차적으로 변경하고, useState로 상태를 관리하여 동적인 UI를 구현합니다.

이 예제는 React에서 props, 컴포넌트 구조, 상태 관리, 타이머 등을 활용하는 좋은 예시입니다. 여러분도 다양한 방식으로 커스터마이즈하여 사용할 수 있습니다.