구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하며 업데이트가 가능하다. 펼침연산자(...)를 자주 사용하여 기존값은 유지하되 원하는 값을 새로 지정하면 코드가 복잡해진다. 1. immer 사용법 - immer를 사용하지 않고 불변성 유지 ...(펼침연산자)를 이용하다 보니 가시성이 떯어지고 코드가 복잡해진다. - 사용법 import produce from 'immer'; const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; }); produce 함수는 2가지 파라미터를 받는다. 첫번째는 수정하고 싶은 상태 두번째는 상태를 어떻게 업데이트할 지 정의하는 함수 두번째 파라미터로 전달되는 함..
React
10장에서 만든 애플리케이션을 최적화 해보자 11.1 많은 데이터 렌더링 하기 더보기 function creatBulkTodos() { const array = []; for (let i = 0; i { const [todos, setTodos] = useState(creatBulkTodos); //고윳값으로 사용될 id //ref를 사용하여 변수 담기 const nextId = useRef(2501); const onInsert = useCallback( text => { const todo = { id: nextId.current, text, checked: false, }; setTodos(todos => todos.concat(todo)); nextId.current += 1; // nextId ..
프로젝트 의도 : TodoList를 작성하고 목록에 추가, 제거할 수 있는 웹 구성 💜프로젝트 준비 : 1) 기본적인 프로젝트 생성 ( creat react-app ) 2) 사용된 라이브러리, 전처리기 - Sass, classnames, react-icon 3) .prettierrc 생성 더보기 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComa": "all", "printWidth": 80 } 4) index.css 설정 더보기 body { margin: 0; padding: 0; background: #e9ecef; } 5) App 컴포넌트 초기화 💜프로젝트 중요 구성 : 1) App.js App컴포넌트..
◾ 일반 CSS ◾ Sass - CSS전처리기 ◾ CSS Module ◾ styled-components 9️⃣.1️⃣ 일반 CSS, 가장 흔한 방식 CSS클래스를 중복 되지 않게 만드는 것이 중요하다. 1) 이름 짓는 규칙 : ( 컴포넌트 이름 - 클래스 )의 형태로 작성한다. 2) CSS Selector 사용 : .App .logo 처럼 특정 클래스 내부에 있는 경우만 적용한다. 9️⃣.2️⃣ Sass 사용하기 Sass는 CSS 전처리기 이며 작업을 편리하게 해주고, 코드의 재사용 증가, 코드의 가독성을 높여 유지보수를 쉽게 만든다 Sass 문법 참고 9️⃣.2️⃣.1️⃣ utils 함수 분리하기 여러 파일에서 사용될 수 없는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳..
8️⃣.1️⃣ useState 가장 기본적인 Hook 함수형 컴포넌트에서 state 사용시 사용한다. 예시 코드 더보기 import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); // useState 함수의 파라미터에 상태의 기본값을 넣어줌 // 함수는 배열을 반환하는데 배열의 첫 번째 원소는 상태값, 두 번째 원소는 상태를 설정하는 함수 return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; 여러번 useState 사용시 한번에 하나의 상태값만 관리하기..
6️⃣.1️⃣ 자바 스크립트 배열의 map() 함수 map함수는 파라미터로 전달된 함수를 이용해 배열 내 각 요소를 원하는 규칙대로 변환후 새로운 배열로 반환한다. arr.map(callback, [this Arg]) -callback : 새 배열을 생성하는 함수, 3가지 --currentValue : 현재 처리중인 요소 --index : 현재 처리중인 요소의 index --arr : 현재 처리중인 원본 배열 -this.Arg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 6️⃣.2️⃣ 데이터 배열을 컴포넌트 배열로 반환하기 key 값이 없이 배열을 랜더링 한다면, 에러가 발생한다. 6️⃣.3️⃣ Key 리액트에서 key는 컴포넌트 배열을 랜더링 했을때 어떤 원소에 변동이 있었는..
