useEffect()에서 parameter로 넣은 함수의 return 함수 function Hello() { function byFn() { console.log("bye :("); } function hiFn() { console.log("created :)"); return byFn; } useEffect(hiFn, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } hiFn안에 byFn을 return해서..
const [keyword, setKeyword] = useState(""); const onChange = (event) => setKeyword/*4*/(event.target.value/*3*/);/*2*/ ... return( ) input을 만들고 event listener을 연결한다. onChange function이 작동할 때 argument로 event를 받는다. event를 발생시킨 input에서 value를 받는다. 받은 value를 'keyword' state에 넣는다. keyword를 가져와 input의 value로 사용한다.
useEffect() 코드를 한 번만 호출하는 함수 import{useEffect} from "react"; useEffect(한 번만 실행하고 싶은 코드, 배열);ex) const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("I run all the time"); useEffect(() => { console.log("CALL THE API..."); }, []);결과(console) click할 때 마다 "I run all the time"은 실행되지만, "CALL THE API...."는 처음 한 번만 실행됨 useEffect(2) [배열]안에 적용하고자 하는 변수를..
React App setup 리액트 프로젝트를 설치하는 것을 실습하였습니다. 설치 ~ 실행: VScode Node.js create-react-app npm start Node.js는 브라우저 밖에서 JS를 실행할 수 있게 해주는 JS 구동 환경 입니다. npm을 이용해 설치하거나 Node.js org에서 설치 가능합니다. node -v 설치된 node.js의 버전을 확인합니다. create react app React기반의 SPA를 만들 때 필요한 파일을 설치하는 명령 *SPA: 단일 페이지 애플리케이션 CRA를 설치하면 React코드의 수정과 동시에 웹 페이지의 모습이 바뀌어 개발하는 과정에서의 시간이 효율적으로 절약됩니다. 설치하고자 하는 폴더를 vscode에서 열고, terminal에서 입력 np..
