개발 시작할 때 npm start 명령어를 통해 개발자서버를 열 수 있다 6.0 Introduction import Button from "./button" import styles from "./App.module.css"; import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); //이전 값을 활용해 다음 값을 만들어내도록 인자를 주었음 return ( {counter} click me! ); } export default App; 아래(수강일지 02)에서는 current를 변수로 활용하였는데, 그냥 아..

#4 PROPS 4.0 PROPS 저번 시간에 배운것 const [amount, setAmount] = React.useState(0); const onChange = (event) => { setAmount(event.target.value); } {index === "xx" ? "Please select your units": null} 오늘 Props : 부모컴포넌트로부터 자식컴포넌트에 데이터를 보낼 수 있게 해주는 방법 우리가 만드는 컴포넌트들은 괄호로 인자를 받아온다. 인자를 props, properties라고 부름 ex) 같은 스타일의 버튼 여러개를 만들때 버튼 하나하나에 스타일을 복붙하는것은 낭비. 그것을 해결해보려 함 리엑트가 프롭들을 자동으로 넣어주어, 내가 사전자료형처럼 넣는 효과라고 ..

# 영화 리엑트 뭐시기 만들기 3.0~ state? -> 기본적으로 데이터가 저장되는 곳 let counter = 0; function countUp(){ counter += 1; render(); } function render(){ ReactDOM.render(, root); } JSX에서 변수는 그냥 {변수명}만 하면 됨. 매우 간단 변수의 값이 변하더라도, UI는 최신화가 되지 않아서 랜더를 수동으로 시켜주는 모습 React는 변한 부분만 업데이트함 const x = [1, 2, 3] [a, b, c] = x >> a=x[0]; b=x[1]; c=x[2]; [1, 2, 3] modifier const [counter, setCounter] = React.useState(0); // [undefin..

바닐라 JS 크롬앱 리액트 만들기 전에 미리 바닐라 JS로 크롬앱 만들기 클리어 하고 와라... 바로 갑니다 근데 JS는 이미 어느정도 아니까, 안되겠다 싶으면 돌아가는거로 할까... 생활코딩 말고 노마드코딩으로 시작을 했어도 좋았을것같다는 생각이 조금 들긴 하는데 도움 엄청많이 됬었으니까 후회는 없는듯 일단 function handleClick(){ counter += 1; span.innerHTML = `Total clicks: ${counter}`; } js에서 문자열 내에 변수 쓰는 방법인듯. 리눅스에서 본것과 비슷한 느낌? 근데 환경구축은 해줘야될듯. 내꺼는 그냥 쌩파일 느낌이네 ReactJS 영화 웹 강의는 일단 2.1까지 봤고, 바닐라JS가서 환경구축까지만 보고 나중에 돌아오자.. 라고 생각..