reactjs는 state가 바뀔 때마다 해당 component 전체가 다시 렌더링 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } console.log("call an api")는 한번만 실행하고 싶어도 state 변화할 때마다 다시 실행 component 내의 특정 부분(코드)을 state 변화할 때마다 렌더링되지 않게하기 -> useEffect 함수 사용 import { useSta..
React
이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름) 이미 존재하는 폴더 명과 같게 짓지 않도록 유의 npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구 npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함 movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료) react-app..
클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render()) JSX 환경에서 {}안에 JS코드 삽입 가능 react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음 더 간단한 방법 const onClick = () => { // setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender) // setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능 // 확실하게 현재 값을 바탕으로 modify하는 코드 setCounter((current) => c..
