useEffect

useEffect

1. 컴포넌트가 처음 render될 때만 코드가 실행 되도록 하기 - state가 변화할 때 모든 컴포넌트가 다시 실행되는 상황에서 컴포넌트가 처음 딱 한번만 실행되도록하기 현재 코드 app.js import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); return ( {counter} Click Me ); } export default App; 2. useEffect - 두 개의 아규먼트를 가지는 함수 첫 번째 아규먼트는 딱 한번만 실행하고 싶은 코드이다. - App.js import { useEffect..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 17.
  • textsms
Tour of CRA

Tour of CRA

1. Buttons.js 및 css 생성하기 - Button.js import PropTypes from "prop-types"; function Button({ text }) { return ( {text} ); } Button.propTypes = { text: PropTypes.string.isRequired, }; //App.js 에서 Button 을 가져올 수 있도록 export default Button; - styles.css button { color: white; background-color: tomato; } - App.js import Button from "./Button"; function App() { return ( Welcome back ); } export default ..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 17.
  • textsms
Create React App

Create React App

1. NodeJs 다운 NodeJs.org 에 접속하여 NodeJS 다운 https://nodejs.org/en Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 설치 후 cmd 창 열어서 node -v 를 입력했을 때 버전이 나오면 잘 설치가 된 것 나는 위와 같은 오류가 발생해서 아래와 같이 해결했다. 1. npm 버전 업데이트 npm install -g npm@latest 2. npm 설정 초기화 npm config set registry https://registry.npmjs.org/ 3. npm 캐시 삭제 npm ca..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 16.
  • textsms
Prop Types 설정하기, 필수 값 지정하기

Prop Types 설정하기, 필수 값 지정하기

1. Prop Types - 아래의 script를 추가 해 주면 어떤 타입의 prop 을 받고 있는지 체크 해 준다. 위 script가 적용되지 않으면 https://unpkg.com/react@17.0.2/umd/react.production.min.js 위 script 주소를 아래와 같이 변경 해 준다. https://unpkg.com/react@17.0.2/umd/react.development.js 2. Prop Types 지정하는 법 //Prop Types 지정하는 법 Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes.number, }; function App() { return ( ); } 그러면 콘솔창에서 위와같은 경고문구를 볼 수..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 12.
  • textsms
Memo를 통해 Rerender 최소화

Memo를 통해 Rerender 최소화

1. props에 넣을 수 있는 것들 - true, false, string, function 등 2. btn을 렌더링하는 컴포넌트가 어떻게 되는지 알아보기 - 버튼에 onClick을 넣고 이 함수는 App 컴포넌트에 있는 state를 바꾸도록 해 보기 function App() { const [value, setValue] = React.useState("Save changes"); const changeValue = () => setValue("Revert changes"); return ( ); } - onClick={chagneValue} 는 이벤트 리스너가 아닌 컴포넌트에(Btn)으로 들어가는 prop이다. 이벤트리스너는 HTML 요소에다가 넣는 것 컴포넌트에 onClick을 넣는경우 아래와같이..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 12.
  • textsms
Props 을 이용해 데이터를 부모 컴포넌트에서 자식 컴포넌트로 보내기

Props 을 이용해 데이터를 부모 컴포넌트에서 자식 컴포넌트로 보내기

1. 함수형 컴포넌트 사용하기 function SaveBtn() { return Save Changes ; } function ConfirmBtn() { return Confirm ; } function App() { return ( ); } 위 function 이 컴포넌트가 되고 안의 의 형식으로 사용 된 것은 JSX의 내부라고 함 2. 스타일 넣어주기 (1) 태그에 Object 형식으로 넣어주기 (2) 컴포넌트를 사용하여 스타일 설정을 넘겨주기 function Btn(props) { return ( {props.banana} ); } function App() { return ( ); } (3) 더 간단하게 사용하기 function Btn({ banana }) { return ( {banana} );..

  • format_list_bulleted React/영화웹서비스만들기
  • · 2024. 4. 11.
  • textsms