만들어 볼 것 import { useState } from "react"; const DiaryEditor = () => { // author는 state, setAuthor는 상태변화를 주도하는 함수 const [author, setAuthor] = useState("이정환"); return ( 오늘의 일기 { console.log(e.target.value); console.log(e.target.name); setAuthor(e.target.value); }} /> ); }; export default DiaryEditor; DiaryEditor.js import './App.css'; import DiaryEditor from './DiaryEditor'; function App() { retur..

// 상태 사용하겠다. import React, { useState } from "react"; const Counter = (props) => { console.log(props); const [count, setCount] = useState(props.initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( {count} + - ); } export default Counter; Counter.js import React from "react"; import Counter from "./Counter"; // import './App..

State - 계속해서 변화하는 특정 상태 상태, 상태에 따라 각각 다른 동작을 함 컴포넌트의 state가 변경이 되면, 그 컴포넌트는 rerender가 된다. // 상태 사용하겠다. import React, { useState } from "react"; const Counter = () => { console.log('호출'); const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const [count2, setCount2] = useState(0); const onIncrease2 = () => { s..

컴포넌트 반환하려면, 최상위에서 무조건 묶어줘야한다. 최상위 컴포넌트를 사용하지 않으려면 import React from 'react'; 를하고, 로 감싸주면 된다. 귀찮으면 로 빈태그로 감싸주면된다. React 기능 사용하지 않으면, React import할 필요가 없다. import React from "react"; import './App.css'; import MyHeader from './MyHeader'; function App() { let name = "soyeong" return ( Hello React! {name} ); } export default App; import React from "react"; import './App.css'; import MyHeader from '...

npx - 설치되지 않은 모듈을 딱 한번만 사용하고 싶을 때 사용한다. npx create-react-app reactexam1 명령어로 reactapp을 설치한다. npm start npm start로 시작하면, "http://localhost:3000/" 주소로웹브라우저로 나온다. 실행시킨 순간 우리의 컴퓨터는 웹서버가 된다. { "name": "reactexam1", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18...