박정현의 꿈에를 들으며..고막이 뚫리는 2시 20분

맞나↗ 면 질문이고
맞나→↘ 면 맞장구

import React, { useState } from "react";
function Child({ onIncrement, onDecrement }) {
return (

<div>
  <button onClick={onIncrement}>+1</button>
  <button onClick={onDecrement}>-1</button>
</div>

);
}
function Parent() {
const [counter, setCounter] = useState(0);
const handleIncrement = () => {
setCounter((prev) => prev + 1);
};
const handleDecrement = () => {
setCounter((prev) => prev - 1);
};
const handleReset = () => {
setCounter(0);
};
return (

<div>
  {/* 카운트 표시 */}
  <div>Counter: {counter}</div>
  {/* 리셋 버튼 */}
  <button onClick={handleReset}>Reset</button>
  {/* 자식 컴포넌트 */}
  <Child onIncrement={handleIncrement} onDecrement={handleDecrement} />
</div>

);
}
function App() {
return (

<div>
  <Parent />
</div>

);
}
export default App;

설명

Child 컴포넌트는 +1/-1 버튼을 렌더링하고, 클릭 시 부모로부터 전달받은 함수를 실행하여 카운트를 증가 혹은 감소시킵니다.
Parent 컴포넌트는 실제로 counter의 state를 보유하고, handleIncrement, handleDecrement, handleReset 함수를 통해 카운트 값을 조작합니다.
App 컴포넌트는 Parent를 렌더링하고, 그 내부에서 Child도 함께 렌더링되어 버튼을 통해 카운터를 조작할 수 있도록 합니다.
실행 방법

React

프로젝트에서 App.js 파일을 위 코드로 교체하거나, 별도 컴포넌트로 생성 후 적절히 임포트하여 사용하세요.

npm start

혹은 yarn start 명령어 등을 통해 로컬 서버를 실행하면 브라우저에서 동작 화면을 확인할 수 있습니다.

간결하게 써줘

import React, { useState } from "react";
const Child = ({ onIncrement, onDecrement }) => (

);

const Parent = () => {
const [counter, setCounter] = useState(0);

return (

<div>
  <div>Counter: {counter}</div>
  <button onClick={() => setCounter(0)}>Reset</button>
  <Child
    onIncrement={() => setCounter((prev) => prev + 1)}
    onDecrement={() => setCounter((prev) => prev - 1)}
  />
</div>

);
};

const App = () => ;

export default App;