민지 개발자 성장 일기

ThemeContext.jsx import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext; MainContent.jsx import { useContext } from "react"; import ThemeContext from "./ThemeContext"; function MainContent(props){ const { theme, toggleTheme } = useContext(ThemeContext); return ( 안녕하세요, 테마 변경이 가능한 웹사이트 입니다. 테마 변경 ); } export de..

DOCTYPE html> Document username css .field { position: relative; } .field input { color: #565656; background: none; padding: 0.625rem; border: 2px solid #030104; } .field label{ position: absolute; top: 0; left: 0; translate: 0.625rem 0.625rem; color:#030104; background-color: #efe4f7; padding-inline: 0.25rem; border: 2px solid transparent; pointer-events: none; transition: translate 250ms, back..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

useCounter() 커스텀 훅 만들기 useCounter.jsx import React, { useState } from "react"; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count + 1); const decreaseCount = () => setCount((count) => Math.max(count-1, 0)); return [count, increaseCount, decreaseCount]; } export default useCounter; Accommodate.jsx import Reac..

위에는 다 소스 사용한 거 리액트 까는법 npx create-react-app cd npm start 로 시작 Test.jsx import React, { useState } from "react"; import Login from "./Login"; import WritePost from "./Write"; import Board from "./Board"; import "./Test.css"; // CSS 파일을 import const Product = ({ name, price, image, addToCart }) => ( {name} {price}원 Add to Cart ); const ShoppingCart = ({ cartItems }) => ( Shopping Cart {cartItems.m..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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

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