import {useState, useEffect} from "react"; function App(){ const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange => (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); // form 안의 button 기본값인 submit이벤트 차단 if(toDo === ""){ // toDo(input)에 아무것도 입력되지 않았으면 return; // 아무것도 실행하지 않고 빠져나옴 }; setToDos(currentArray => [toDos, ..

#Cleanup(정리) useEffect에 대한 뒷정리. 컴포넌트가 사라질 때 cleanup 함수가 호출됨 import Button from "./Button"; import styles from "./App.modules.css"; import { useState, useEffect } from "react"; function Hello() { // 화살표 함수 useEffect(() => { console.log("hi"); return () => console.log("bye"); }, []); // 기존 익명함수 useEffect(function () { console.log("hi"); return function () { console.log("bye"); }; }, []); return He..

#useEffect useEffect(() => {함수}, [조건]); 조건값이 변경될 때 마다 함수를 실행함 import { useState, useEffect } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev + 1); console.log("i run all the time"); useEffect(() => { console.log("call api") }, []); return ( {counter} Click me ); } export default App; console.log를 기준으로 보면, "i run all the ti..

# prop-types 인자의 타입값을 정하는 prop-types는 라이브러리로 따로 빠졌다고 하기 때문에 설치를 진행해야 한다. npm i prop-types 터미널에 위의 명령어를 입력한다. powershell에 입력할 경우 오류가 뜨며 설치가 안될 수 있으니 bash로 바꾼 뒤 설치하는 것을 추천한다. 혹시라도 안될 경우 아래 방법으로 해보는 것도 추천 npm install --global yarn yarn add prop-types # react CSS 외부 css파일을 생성하여 import하는 방법 *Button.module.css .title {color: #fff; background: tomato;} *App.module.css .title {font-size:18px;} *App.js i..

# create-react-app CLI(커맨드 라인 인터페이스). 리액트를 사용하기 위해 필요한 환경을 한번에 조성해주는 인터페이스. # create-react-app 사용하기 1. node js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 운영체제에 맞는 node.js를 설치 제대로 설치됐는지 확인하려면 터미널에 아래 명령어를 입력한다. node -v 정상적으로 설치가 되었다면 node.js의 버전이 출력된다 create-react-app을 사용하기 위해서는 node.js의 npx라는 커맨드를 사용하기 때문에 npx도 터미널에 입력해서 ..

PropTypes : 각 컴포넌트의 인자값의 속성을 체크 (*주의 : 일반 production으로는 propTypes를 인식할 수 없으므로 development로 사용해야 함) 위의 내용대로면 컴포넌트 Btn의 인자값 text는 문자, fontSize는 숫자가 적용되어야 한다. 하지만 두번째 Btn의 text는 숫자, fontSize는 문자가 들어가있고 이는 문법상으로는 오류가 아니라 출력은 되지만 propTypes에 의해 콘솔창에 오류가 뜬다. function App(){ return( ); }; 지정한 타입으로 수정하면 오류는 사라진다. 필수로 입력되어야 하는 인자값을 지정하고 싶은 경우에도 propTypes를 사용할 수 있다. 만약, text와 fontSize가 필수 인자값으로 들어가야 한다면 is..