개발/React

[React] 가위바위보 만들기

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..

[React] 함수형 useEffect

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..

[React] 클래스형 컴포넌트

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..

[React] 달력 만들어보기

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";..

[React] 기초

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