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를..

State란 현재 가지고 있는 형태나 모양을 정의 변화할 수 있는 동적인 값 리액트의 컴포넌트 들은 상태를 정의 할 수 있느 state를 가질 수 있다. state의 값에 따라 렌더링 되는 UI가 결정된다. 리액트가 state의 상태 변화에 따라 렌더링되는 결과를 바꿀수 있다. 리액트에서 다시 렌더링 되는 것을 리 렌더(Re-Render), 리 렌더링(Re-Rendering) 이라고 한다. 리액트에서는 하나의 컴포넌트에 여러개의 state를 가질 수 있다. import "./App.css"; import { useState } from "react"; function App() { const state = useState(); console.log(state); return ; } export defau..