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..
course/nomadcoder
이전 연습에서는 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..
super converter에서 부모 컴포넌트(App)에서 자식 컴포넌트, 시간 변환기와 길이 변환기로 데이터 전송 x 여러 버튼에 같은 스타일을 주려면 다 복사 붙여넣기를 해야함 props 사용하면 같은 스타일을 가진 컴포넌트 재사용 가능 App(부모)에서 내가 만든 컴포넌트(Btn)에 임의의 변수명으로 property를 부여하면 Btn(자식)이 모든 property를 object형태의 인자로 받아 자식 컴포넌트 안에서 configure 가능 property 부여 시, {}안에 숫자, 문자, bool 입력. 문자는 생략가능 Btn(props)로 받으면 설정할때 props.text 처럼 사용 자식에게 함수도 prop 인자로 보내줄 수 있음 // memorization을 사용해 props 변화가 없는 컴포..
클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render()) JSX 환경에서 {}안에 JS코드 삽입 가능 react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음 더 간단한 방법 const onClick = () => { // setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender) // setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능 // 확실하게 현재 값을 바탕으로 modify하는 코드 setCounter((current) => c..
react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다 reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다 vanillajs 로 버튼 클릭 수 화면에 띄우기 Total clicks: 0 click me react로 같은 기능 만들기 react에서는 script 안에서 element를 만들어 interactive하게 함 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능 property에 ad..
