리액트
-
[React TodoList] 많은 데이터 렌더링, React.memo, 성능 최적화React/일정관리 프로젝트 2023. 3. 14. 18:34
React TodoList 보완하기 많은 데이터 렌더링 생성하기 import React , {useCallback, useState,useRef} from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; function createBulkTodos() { const array = []; for(let i=1;i { const [todos,setTodos] = useState(createBulkTodos) const nextId = useRef(2500); const onInsert = useCallback( text => { co..
-
[리액트 기초] 리액트 Hook - useState,useEffect,useReducer,useMemo,useCallback,useRefReact/기초 2023. 3. 13. 18:39
useState 함수형 컴포넌트 const [value, setValue] = useState(''); const [name,setName] = useState(''); return ( setValue(value+1) } {value} setName(e.target.value)) /> {name} ) useEffect 렌더링 될때마다 특정 작업 수행 useEffect(()=> { console.log() }, [] : 마운트 [name] : 특정 값 업데이트 } useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다른 값으로 업데이트 function reducer(state,action) { return { ...state, [action.name] : action.value } } ..
-
[리액트 기초] 이벤트 핸들링, ref, 컴포넌트 반복, 컴포넌트 라이프 사이클 메서드, 컴포넌트 스타일링, 자동완성React/기초 2023. 3. 13. 18:10
이벤트 핸들링 const onChange = e => { const next = { ...form, [e.target.name] : e.target.value} setForm(nextForm); } ref : Dom에 이름 짓기 1. 사용 이유 - Dom을 직접 건드려야 할 때 ex 1. 특정 input에 포커스 ex 2. 스크롤 박스 조작 ex 3. canvas 요소 그림 그리기 2. 사용 방법 a. 콜백 함수 {this.input=ref}} /> b. createRef input = React.createRef(); 컴포넌트 반복 (= 반복 데이터 렌더링) 배열의 map 이용 const name = ['a', 'b', 'c', 'd', 'e'] const nameList = name.map((name..
-
[리액트 기초] Vs code 설정 , 자동 저장, Fragment, App.js, 조건문, 인라인 스타일링, 특징, 주석React/기초 2023. 3. 13. 12:53
Vs code 설정 1. ESlint : 문법확인 2. Prettier : 가독성 3. 자동저장 (설정 -> autosave) 4. ReactJS CodeSnippet : 코드 스니펫 rsc + enter (또는 tab) 5. VS-Code-Styled-Componenets : 색상 6. indent-rainbow : 블록 색상으로 표시 자동 저장 File -> Auto Save Fragment = return ( hello ) App.js import React from 'react'; const App = () => { const name = "Judith-hopps" return ( {name} ); }; export default App; 조건문 1. 삼항 연산식 { 조건식 ? () : () } ..