AttendanceBook.jsximport React from "react";const students = [ { id: 1, name: "Inje" }, { id: 2, name: "Steve" }, { id: 3, name: "Bill" }, { id: 4, name: "Jeff" },];function AttendanceBook(props) { return ( {students.map((item) => { return {item.name} // 포맷팅된 문자열로도 ..

Toolbar.jsximport React from "react";// 스타일 객체를 정의합니다.const styles = { wrapper: { padding: 16, // 컴포넌트의 안쪽 여백 display: "flex", // 수평 정렬 flexDirection: "row", // 요소를 가로로 정렬 borderBottom: "1px solid grey", // 아래쪽 테두리 }, greeting: { marginRight: 8, // 오른쪽 여백 },};function Toolbar({ isLoggedIn, onClickLogin, onClickLogout }) { // Toolbar 컴포넌트를 정의합니다. ..

ConfirmButton.jsximport React, { useState } from "react";function ConfirmButton() { const [isConfirmed, setIsConfirmed] = useState(false); // 버튼이 확인되었는지 여부를 관리하는 상태값 const toggleConfirm = () => { // 버튼 클릭 시 상태를 변경하는 함수 setIsConfirmed(!isConfirmed); // 이전 상태를 반전 }; return ( {isConfirmed ? "확인됨" : "확인하기"} );}export default ConfirmButton; index.jsimp..

useCounter.jsximport React, { useState } from "react";function useCounter(initialValue) { // 커스텀훅, useCounter: 숫자를 관리 const [count, setCount] = useState(initialValue); // count라는 상태(state)와 그 상태를 업데이트하는 함수 setCount를 생성 const increaseCount = () => { // 숫자를 1 증가시키는 함수 setCount((currentCount) => currentCount + 1); }; const decreaseCount = () => { // 숫자를 1 감소시키는 함수 (0보다 작아지지 않게 제한..

Notification.jsximport React from "react";// 스타일 객체 정의const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16, }, messageText: { color: "black", fontSize: 16, },};class Notification extends React.Component { // 생성자: props 초기화 constructor(props) { ..

Comment.jsx// React 라이브러리를 가져옵니다.import React from "react";// 스타일 객체를 정의합니다. CSS 스타일 속성들을 JavaScript 객체로 작성했습니다.const styles = { // 전체 댓글 컴포넌트를 감싸는 스타일 wrapper: { margin: 8, // 외부 여백 padding: 8, // 내부 여백 display: "flex", // 자식 요소를 가로 방향으로 배치 flexDirection: "row", // 가로 방향 정렬 border: "1px solid grey", // 회색 테두리 borderRadius: 16, // 테두리 둥글게 만들기 },..

Clock.jsximport React from "react";function Clock(props) { return ( 안녕, 리액트! 현재 시간: {new Date().toLocaleTimeString()} );}export default Clock; index.jsimport React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals";import Clock from "./chapter_04/Clock";const..

Book.jsximport React from "react";function Book(props) { return ( {`이 책의 이름은 ${props.name}입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} );}export default Book; Library.jsximport React from "react";import Book from "./Book";function Library(props) { return ( );}export default Library; index...

1.관리자 권한으로 PowerShell 실행,‘PowerShell’을 검색하여, 마우스 오른쪽 버튼으로 클릭한 후 ‘관리자 권한으로 실행’을 선택2.실행 정책 변경: 다음 명령어를 입력하여 실행 정책을 변경Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass 3.프롬프트가 표시되면, ‘Yes’(Y)를 입력하여 정책 변경을 승인하면 완료 + 원래의 실행 정책으로 복구하려면Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Restricted

Add React in One Minute This page demonstrates using React with no build tooling. React is loaded as a script tag.  like_button.js"use strict";const e = React.createElement;class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { r..