생각하다 생각하다

1. CRA 사용하기 cra란? : create-react-app 사용법 npx create-react-app 리액트_파일명 cd 리액트_파일명 npm start 2. 컴포넌트에 css 입히기 방법 1. css 파일에 평범하게 작성 방법 2. js 파일에서 태그 내부에 style={{ }} 로 작성 방법 3. @@.module.css 사용하기 (권장됨) by using className @@.module.css 파일 내부에 평범하게 css 처럼 작성하고 사용할 파일에 import 해서 불러온 후 className={style.클래스이름} 으로 사용 import styles from "@@.module.css"; // 사용할 태그 내부에 // className = {style.title} 입력

시 분 변환기 function MinutesToHours() { const [amount, setAmount] = React.useState(); const [inverted, setInverted] = React.useState(); const onChange = (event) => { setAmount(event.target.value); } const reset = () => setAmount(0); const onInvert = () => { reset(); setInverted((current) => !current); } return ( Hours Reset {inverted ? "Turn back" : "Invert"} ) } function KmToMiles() { return( KM 2 ..

1. 함수형 컴포넌트 App.js function SaveBtn() { return Svae Changes ; } function ConfirmBtn() { return Confirm ; } function App() { return( ); } 과 과 같은 컴포넌트를 함수형 컴포넌트라고 한다. 2. 컴포넌트 변경하기 by using Props props를 이용하면 같은 버튼을 두 개 만들 필요가 없다. Btn이라는 함수형 컴포넌트를 하나만 만들고 text만 바꿔주면 위와 같은 두가지 버튼을 얻을 수 있다. function Btn() { return ; } function App() { return( ); } 1. Btn에 text 속성 추가하기 function Btn() { return ; } funct..

1. 클릭 수 세기 -> 바닐라JS, 리액트JS로 각각 구현 vanilla.html Total Clicks: 0 Click me ​ react.js const root = document.getElementById("root"); function Add() { const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter + 1); } return ( Total clicks: {counter} Click me ) } ReactDom.render(, root); 2. React.useState() state를 바꾸는 두 가지 방법 1. 직접 설정 const [counter, setCounter] = Rea..

1. 투두리스트 값 저장하기 in localStorage 1. 투두리스트 값 저장하기 JSON.stringify 화면에 투두를 입력해도 새로고침하면 사라지기 때문에 로컬 스토리지에 저장할 필요가 있다. const toDos = []; //투두리스트 저장할 배열 // 로컬스토리지에 저장하는 함수 function saveToDos() { localStorage.setItem("todos", toDos); } 그리고 handleToDoSubmit() 함수에 seveToDos() 함수를 넣어준다. function handleToDOSubmit(event) { event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; toDos.p..

1. html에 투두리스트 뼈대 생성하기 1. html 파일에 투두리스트 틀 만들기 (input부분, 리스트 부분) index.html 1. 새로운 할 일을 입력할 Form태그를 생성하고 그 안에 input 태그를 생성한다. 2. 아래에 투두리스트를 보이게 하도록 ul 태그를 생성한다. 3. ul 안의 li 태그는 자바스크립트로 동적으로 생성할 것이다. 2. 자바스크립트에서 투두리스트 요소 가져오기 todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-l..

1. 랜덤 명언 구현하기 1. 명언 배열 생성하기 (js 파일은 따로) quotes.js const quotes = [ { quote: "Well done is better than well said.", author: "Benjamin Franklin", }, { quote: "If you would thoroughly know anything, teach it to others.", author: "Tryon Edwards", }, { quote: "My personal hobbies are reading, listening to music, and silence.", author: "Edith Sitwell", }, { quote: "Reading is sometimes an ingenious de..

1. 매번 반복하기 setInterval() 부제: 매 초, 2초마다, 4초마다 등 원하는 간격으로 실행시키기 1) 매번 반복하기 - setInterval() setInterval(함수, 시간간격) //시간은 ms 기준 (million seconds) index.html 00:00 h1태그 위에 h2 태그 추가하기. id는 clock. 디폴트 세팅은 00시 00분. clock.js const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); // -> 5초마다 sayHello 함수가 실행됨 2) 타이머 설정하기 - setTimeout() set..