Bulb.jsx const Bulb = ({ light }) => { return ( {light === "ON" ? ( ON ) : ( OFF )} ); }; export default Bulb; App.jsx import "./App.css"; import { useState } from "react"; import Bulb from "./components/Bulb"; function App() { const [light, setLight] = useState("OFF"); return ( { setLight(light === "ON" ? "OFF" : "ON"); }} > {light === "ON" ? "끄기" : "켜기"} ); } export default App; App.jsx state를..

Props란? 부모 컴포넌트가 자식 컴포넌트에 값을 전달해준는것을 말한다. App.js function App() { return ( ); } Button.js const Button = (props) => { return ( {props.text} ) } export default Button; 결과 이렇게 자식컴포넌트에게 props로 전달해서 전달한 props의 값을 자식컴포넌트가 사용할수 있다. styil props 전달 App.jsx Button.jsx {props.text} ) 결과 styil도 자식컴포넌트에게 전달하여 사용할 수 있다. 부모컴포넌트에서 props에 아무것도 전달하지 않았을때 defaultProps 설정하는 방법 const Button = (props) => { return ( ..