기록

npm i react-router-dom@5.3.0 react-router-dom v5 설치 npm install -- 업데이트 index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); APP.js import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./r..

import { useEffect, useState } from "react"; function App(){ const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect( ()=>{ fetch("https://api.coinpaprika.com/v1/tickers") .then(response => response.json()) .then((json) =>{ setCoins(json); setLoading(false); }) }, []) return ( The Coins!{ loading ? "" : `(${coins.length})`} {loading ? Loading... : {coins.m..

import { useEffect, useState } from "react"; function App(){ const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === "") return; setToDos( (currentArray)=> [toDo, ...currentArray] ); setToDo(""); } return ( my ToDoList{toDos.length} submit {toDos.map( (..

import { useEffect, useState } from "react"; function App() { const [counter,setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); console.log('i run all the time') useEffect( ()=> { console.log('i run only once.') }, []) //한번만 실행 useEffect(()=>{ // if(keyword !== "" && ..

1. node js설치 2. node -v / npm -v 버전 확인 3. npm install -g create-react-app 설치 4. npx create-react-app react-for-biginners 로 폴더 생성 및 install 5. code react-for-beginners 로 vs code 오픈 6. vs code terminal에서 npm start 입력 => 서버 생성 css 적용 Button.js 생성 import PropTypes from "prop-types" import styles from "./Button.module.css" function Button({text}){ return {text} } Button.propTypes = { text:PropTypes.s..

props 는 부모컴포넌트로부터 자식컴포넌트에 데이터를 보낼수 있게 해주는 방식(인자) 버튼 변경 및 React.memo()를 사용하였음. React.memo는 고차 컴포넌트(Higher Order Component) 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다 //프로토타입 스크립트 추가 컴포넌트.propTypes을 이용 컴포넌트의 속성(props)에 대한 유효성 검사를 수행하는 데 사용되는 기능입니다. propTypes를 정의하면 해당 컴포넌트가 받아야 하는 속성의 유형과 필수 ..

Total click : 0 click me 자바스크립트 : DOM 변경을 직접처리. 필요한 DOM요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행한다. DOM변경이 발생하면 브라우저는 변경된 DOM트리를 다시 계산하고, 랜더트리를 다시 생성 한후 화면에 그려지게 됨. 이 과정은 비용이 많이 드는 연산으로 자주 발생하게 되면 성능을 저하시킬 수 있다. 리액트 : DOM 변경을 처리하기 위해 가상DOM이라는 개념을 도입. 먼저 메모리에 가상 DOM트리를 생성한다. 이 트리는 실제 DOM 트리는 사본으로서, 실제 DOM트리와는 별도로 존재한다. REACT JS는 상태 변경이 발생 될 때마다 새로운 가상 DOM트리를 생성하고, 이전의 가상 D..

navigatable - true로 설정하면 키보드 탐색을 사용하여 위젯을 탐색할 수 있습니다. 기본적으로 키보드 탐색은 비활성화되어 있습니다. rowtemplete 행을 렌더링하는 템플릿입니다. Be default는 모든 데이터 원본 항목에 대해 테이블 행()을 렌더링합니다. selectable - true로 설정된 경우 사용자는 그리드 행을 선택할 수 있습니다. 기본적으로 선택은 비활성화되어 있습니다. 다음 문자열 값으로 설정할 수도 있습니다: "row" - 사용자가 단일 행을 선택할 수 있습니다. "cell" - 사용자는 단일 셀을 선택할 수 있습니다. "여러 행" - 사용자가 여러 행을 선택할 수 있습니다. "multiple, cell" - 사용자가 여러 셀을 선택할 수 있습니다. change -..