JudithHopps JudithHopps

리액트 투두리스트 보완 불변성의 중요성 불변성이란? 기존의 값을 수정하지 않으면서 새로운 값을 만들어 내는 것 TodoList 컴포넌트 최적화 하기 리스트 내부에서 사용하는 컴포넌트도 최적화 해야 하고, 리스트로 사용되는 컴포넌트 자체도 최적화해 주는 것이 좋다. react-virtualized를 사용한 렌더링 최적화 하기 리스트 컴포넌트에서 스크롤 되기 전에 보이지 않는 컴포넌트는 렌더링 하지 않고 크기만 차지하게 끔 할 수 있다. 스크롤 이벤트 발생 시, 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킨다. 이 라이브러리를 사용하면 낭비되는 자원을 아주 쉽게 아낄 수 있다. 사용방법 1. 패키지 설치 npm install react-virtualized 2. UI 컴포넌트 px 알아보..

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..

컴포넌트 체크 기능 구현하기 onToggle 구현하기 onToggle이란 클래스명에 있으면 삭제, 없으면 추가하는 것이다. App.js에서 todo 상태 사용하기 import React , {useCallback, useState,useRef} from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { (...) const onToggle = useCallback( id => { setTodos( todos.map(todo => todo.id === id ? {...todo, checked:!to..

컴포넌트 삭제 기능 구현하기 배열 내장 함수 filter 사용 const array = [1,2,3,4,5,6,7] console.log(array.filter(v=>v>3)) //[4,5,6,7] App.js에서 todo 배열에서 id로 항목 지우기 import React , { useState, useCallback } from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { (...) const onRemove = useCallback( id => { setTodos(todos.filter..

컴포넌트 기능 구현하기 리스트 화면에 출력 App.js에서 todo 상태 사용하기 import React , { useState } from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { const [todos,setTodos] = useState([ { id :1, text : '리액트의 기초 알아보기', checked : true }, { id :2, text : '리액트의 스타일링해 보기', checked : true }, { id :3, text : '일정 관리 앱 만들어 보기', ch..

컴포넌트 제작 TodoInsert import React, { useCallback,useState } from 'react'; import { MdAddComment } from "react-icons/md"; import './TodoInsert.scss' const TodoInsert = ({onInsert}) => { return ( ); }; export default TodoInsert; TodoInsert.scss .TodoInsert{ display: flex; background-color: #495057; input{ background :none; outline: none; border: none; padding: 0.5rem; font-size: 1.125rem; line-heigh..

1. 프로젝트 준비 프로젝트 생성 및 라이브러리 설치 //프로젝트 생성 npm create react-app Todo //라이브러리 npm install node-sass npm install classnames npm install ract-icons Prettier 설정 루트 디렉터리 .prettierrc 파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } index.css 수정 body { margin: 0; padding: 0; background-color:azure; } App.js 컴포넌트 초기화 import React from 'r..

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 } } ..