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

1. 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 풀이 (1) 첫번째 풀이 function solution(s) { var answer = ""; answer = s .toLowerCase() .split(" ") .map((v) => v.replace(/^./, v[0].toUpperCase())) .join(" "); return answer; } 런타임 에러 : replace가 런타임 에러를 일으킨거 같다. (2) 두번째 풀이 function solution(s) { var answer = ""; answer = s .toLowerCas..

1. 문자열 정수로 바꾸기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { var answer = 0; answer = +s; return answer; } 2. x만큼 간격있는 n개 숫자 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(x, n) { var answer = []; for (let i = 1; i 1) { num = nu..