현재 카운트

mgkim·2024년 12월 31일
2

react

목록 보기
12/36

증가 버튼을 클릭하면 OOOO 영역에 "현재 카운드는 OOO입니다."를 출력하도록, App, Todo, Title 컴포넌트를 작성해 보세요.

<p>OOOO</p> 증가

--------------------------------------코드짜보기

// App.js


import React, { useState } from 'react';
import Todo from './Todo';

const App = () => {
  return (
    <div>
      <Todo />
    </div>
  );
};

export default App;

// Todo.js


import React, { useState } from 'react';
import Title from './Title';

const Todo = () => {
  const [count, setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Title title="현재 카운트">
        <p>현재 카운트는 {count}입니다.</p>
      </Title>
      <button onClick={handleIncrease}>증가</button>
    </div>
  );
};

export default Todo;

// Title.js


import React from 'react';

const Title = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

export default Title;
profile
@lala.love_garden.lala

0개의 댓글