1. React에서 router사용하기 리액트는 페이지가 하나인데 어떻게 여러개의 페이지를 보여줘야 할까? 페이지도 컴포넌트, 하위 컴포넌트들을 모아서 페이지의 형태로 구성을 하고 페이지 컴포넌트를 url의 경로에 맞춰서 보여주면 된다. 한페이지에 내용이 교체되면서 페이지가 이동된것처럼 보여주는 것이다. 리액트는 새로고침되지 않는 어플리케이션이기 때문에 리액트의 페이지 이동은 눈속임이다. 리액트 라우터 라이브러리가 해주는일 : url이 바뀔때 컴포넌트를 바꿔줌 router 설치 https://reactrouter.com/en/v6.3.0#welcome-to-react-router Docs Home v6.3.0 Official assets for things like articles and video tu..

1. App.js import "./App.css"; import { img01, img02, img03, img04, img05, img06 } from "./img"; import Block from "./Block"; import { useEffect, useState } from "react"; function App() { const select = { scissors: { name: "가위", img: img03, }, rock: { name: "바위", img: img02, }, paper: { name: "보", img: img01, }, }; const [userSelect, setUserSelect] = useState(null); const [comSelect, setComSelect..

1. 예시 코드 import React, { useEffect, useState } from "react"; const BlockFn = () => { const [num, setNum] = useState(0); const [num2, setNum2] = useState(0); useEffect(() => { console.log("componentDidMount"); }, []); useEffect(() => { console.log(num); console.log("componentDidMount"); }, [num, num2]); const add = () => { setNum(num + 1); console.log(num); }; return ( 증가 ); }; export default Blo..

1. 클래스형 컴포넌트 export default class BlockClass extends Component { constructor(props) { super(props); this.state = { num: 0, name: "하이", }; console.log("constructor"); } componentDidMount() { console.log("componentDidMount"); } componentDidUpdate() { console.log(this.state); console.log("componentDidUpdate"); } add = () => { this.setState({ num: this.state.num + 1 }); console.log(this.state); }; r..

1. index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); reportWebVitals(); 2. App.js import "./App.css"; import Mycom from "./components/Mycom"; import CalenderTop from "./components/CalenderTop";..

1. React란? React는 페이스북에서 2011년에 개발하고 제공하는 라이브러리다. 리액트의 데이터구조는 단방향 데이터 흐름을 가지고 있다. (리덕스) 리덕스는 인벤토리 저장소 같은 것이다. 리액트의 랜더링 리액트는 보여주는것에 집중된 라이브러리이다. 2. 가상돔 (1) 변화가 일어나면 변화된 버전의 가상돔으로 바꿔줌 - 데이터가 업데이트 되면 UI를 가상돔에 리랜더링 한다. (2) 변화전의 가상돔과 변화된 가상돔을 비교해서 바뀐 부분만 실제 돔에 리랜더링 적용한다. 3. 장점 (1) 일단 유명하고 많이 사용한다. -- 유명한 라이브러리 (2) 자바스크립트만으로 개발할때 보다 편하고 태그를 다루기 쉽다. (3) 재활용성이 높다. (4) 불편하게 태그 선택자를 사용할 일이 적다. (5) html과 j..