import './App.css';import { useState } from 'react';const Bulb = ({ light }) => { return ( {light === 'ON' ? ( ON ) : ( OFF )} );};function App() { // state 생성 // 기본 구조: const [state, setState] = useState(0); const [count, setCount] = useState(0); // 2. lightState의 값을 on으로 바꾸면 전구가 렌더링된다. const [light, setLight] = useState('OFF'); return ( ..

Props로 데이터 전달하기Props란? 컴포넌트에 값 전달하기부모 컴포넌트가 자식 컴포넌트 들에게 마치 함수의 인수를 전달하듯 원하는 값을 전달해주는게 가능하다.이렇게 전달된 값을 props라고 한다.  props를 이용하면 좋은점props를 이용하면 컴포넌트를 마치 함수를 호출하듯이 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.전달받은  props의 값을 활용하는 방법props라는 매개변수에 객체 형태로 값이 저장되어있음으로 점 표기법을 사용해 props.text를 렌더링하도록 설정하면 버튼 안에 각각의 렌더링된다.  그렇다면 컬러의 값도 활용하려면 어떻게 해야할까? 버튼의 style을 color는 props의 color라고 설정해주면 된다. 버튼이 빨간색으로 렌더링된것을 확인할..

📌 배운 내용 요약useState 훅을 사용해 상태(state)관리하기컴포넌트 분리: Header, InputFild, PostList로 구조 나눔버튼 클릭 이벤트로 상태를 변경하고 화면이 바뀌는 흐름props를 통해 자식 컴포넌트로 데이터 전달📃 주요 코드 설명import React, { useState } from 'react'import Header from '../components/Header'import './index.css'import InputField from '../components/InputFild'import PostList from '../components/PostList'export const App = () => { const [sample] = useState('t..