JudithHopps JudithHopps

immer 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있다. immer 사용하지 않고 불변성 유지하기 import React,{useRef,useCallback,useState} from 'react'; const App = () => { const nextId = useRef(1); const [form,setForm] = useState({name: '',userName: ''}) const [data,setData] = useState({array:[], uselessValue:null}) const onChange = useCallback( e => { const {name,value} = e.target; setForm({ ...form, [nam..

npm install gh-page가 다운이 되지 않고 아래와 같이 에러창이 뜨기도 한다. 이럴 땐 -g 명령어를 추가로 적어준다. npm install -g gh-pages --save-dev 그러면 성공적으로 패키지를 다운받을 수 있다. 그 다음 과정은 아래 링크를 참고하길 바란다. https://velog.io/@nemo/github-page-deploy-%EB%B0%B0%ED%8F%AC [React] 깃허브 페이지에 리액트 프로젝트 배포하기 자, 이제 제작한 앱을 깃허브 페이지에 배포해보자.메인 디렉토리 URL : https://{본인아이디}.github.io/서브 디렉토리 URL : https://{본인아이디}.github.io/movie-app우리는 메인이 아닌 서브 디렉토리에 배 velog.io

프로젝트 마무리 파일 정리 1. 컴포넌트 폴더 생성 컴포넌트는 Component 폴더로, Scss는 Scss 폴더로 이동하기 2. App.js 수정 - bulk 데이터 수정 - useReducer => useState로 수정 import React , {useCallback, useRef, useState} from "react"; import TodoTemplate from "./Component/TodoTemplate"; import TodoInsert from "./Component/TodoInsert"; import TodoList from "./Component/TodoList"; const App = () => { const [todos,setTodos] = useState([ { id :1,..

리액트 투두리스트 보완 불변성의 중요성 불변성이란? 기존의 값을 수정하지 않으면서 새로운 값을 만들어 내는 것 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..