// 상태 사용하겠다. 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...

1. 첫번째 이유 ARTICLE부분만 빼고 다 똑같은데, header섹션 수정하려면 다른 페이지에도 다 수정해야하는데 그러면 파일이 많을경우에는 아주 곤란하다. 이때 중복코드가 문제가 되는것이다. -> Shortgun Surgery(산탄총 수술) 그래서 React는 Component기반의 UI라이브러리이기때문에 우리가 사용한다. 2. 두번째 이유 3. 세번째이유 Virtual DOM (가상 돔)