객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 immer라는 라이브러리 사용하는 것이 더 쉽게 불변성 유지 가능 12.1 immer를 설치하고 사용법 알아보기 yarn create react-app immer-tutorial cd immer-tutorial yarn add immer ▼immer를 사용하지 않고 불변성 유지 하는 코드 더보기 //App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name:'', userna..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

11.1 많은 데이터 렌더링하기 랙(lag) 경험을 위해 많은 데이터 렌더링 //App.js import React, {useState, useRef, useCallback} from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = u..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

첫 번째 글에서는 express를 사용하지 않고, 오로지 react로만 메모장 기능을 구현해보았는데요, 이번 글에서는 express를 사용해 메모장 만들기 프로젝트를 진행해보겠습니다. ※ https://gngsn.tistory.com/17 를 바탕으로 만들었습니다. 원글에서는 클래스형 컴포넌트를 사용하였는데요. 저희는 함수형 컴포넌트를 이용해 메모장을 만들어보기로 하였으며, 새 메모장을 생성하는 기능뿐만 아니라, 기존 메모를 수정하고 삭제하는 기능까지 추가해보았습니다. 클래스형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanran33/memo-project 함수형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanr..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00

DB 연결 없는 Version const [memos, setMemos] = useState([ { id: 0, title: '제목1', author: '익명1', content: '메모1' }, { id: 1, title: '제목2', author: '익명2', content: '메모2' }, { id: 2, title: '제목3', author: '익명3', content: '메모3' }, ]); ⇒ 배열에 데이터 저장하여 사용 CREATE //App.js const nextId = useRef(3); const onInsert = useCallback( (title, author, content) => { const memo = { id: nextId.current, title, author, co..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00

INDEX 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 ● 문법 2. 데이터 배열을 컴포넌트 배열로 변환하기 2.1 컴포넌트 수정하기 2.2 App 컴포넌트에서 예제 컴포넌트 렌더링 2.3 모듈 내보내기 및 불러오기 3. key 3.1 key 설정 4. 응용 4.1 초기 상태 설정하기 4.2 데이터 추가 기능 구현하기 4.3 데이터 제거 기능 구현하기 5. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 컴포넌트 반복 html 태그 중에는 반복적으로 사용할 필요가 있는 태그(li, tr, td 등)가 있다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; 이 장에서는..

21-22/21-22 리액트 스타터 -2 2021. 11. 29. 13:00

이번 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아봅시다. 6-1 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) callback은 새로운 배열의 요소를 생성하는 함수입니다. 파라미터는 아래 세 가지입니다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): call..

21-22/21-22 리액트 스타터 -1 2021. 11. 29. 13:00

INDEX 5장 ref: DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? 1.1 예제 컴포넌트 생성 1.2 App 컴포넌트에서 예제 컴포넌트 렌더링 1.3 DOM을 꼭 사용해야 하는 상황 2. ref 사용 2.1 콜백 함수를 통한 ref 설정 2.2 createRef를 통한 ref 설정 2.3 적용 3. 컴포넌트에 ref 달기 3.1 사용법 3.2 컴포넌트 초기 설정 3.3 컴포넌트에 메서드 생성 3.4 컴포넌트에 ref 달고 내부 메서드 사용 4. 정리 ● 개념 복습 문제 ● 코드 문제 5장 ref: DOM에 이름 달기 일반적인 HTML에서 DOM 요소에 이름을 달 때는 id를 이용한다. → CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 리액트 프로젝트 내부..

21-22/21-22 리액트 스타터 -2 2021. 11. 22. 13:00

일반적으로 HTML에서 DOM에 이름을 달 때는 id를 사용합니다. id를 달면, 1. CSS에서 특정 id에 스타일 적용하기 2. 자바스크립트에서 특정 id를 작업하기. 두 가지가 모두 가능합니다. 리액트 프로젝트 내부에서 이와 같은 행동을 하기 위해서는, reference의 줄임말인 ref를 사용합니다. 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접 건드려야 할 때' 사용합니다. .success { background-color: lightgreen; } .failure { background-color: lightcoral; } ValidationSample.css import React, { Component } from 'react'; import './ValidationSa..

21-22/21-22 리액트 스타터 -1 2021. 11. 22. 13:00

INDEX 4장 이벤트 핸들링 1. 리액트의 이벤트 시스템 1.1 이벤트를 사용할 때 주의 사항 1.2 이벤트 종류 2. 예제로 이벤트 핸들링 익히기 2.1 컴포넌트 생성 및 불러오기 2.2 onChange 이벤트 핸들링하기 2.3 임의 메서드 만들기 2.4 input 여러 개 다루기 2.5 onKeyPress 이벤트 핸들링 3. 함수형 컴포넌트로 구현해보기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 이벤트 핸들링 이벤트(event): 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것으로 클릭, 키보드 입력 등의 사용자의 행위 이벤트 핸들링: 이벤트(event)를 처리하는 것 자바스크립트의 이벤트 실행 Click Me 1. 리액트의 이벤트 시스템 // Say...

21-22/21-22 리액트 스타터 -2 2021. 11. 15. 13:00

INDEX 3장 컴포넌트 1. 클래스형 컴포넌트 ● 컴포넌트를 선언하는 두 가지 방식 2. 첫 컴포넌트 생성 2.1 src 디렉터리에 MyComponent.js 파일 생성 2.2 코드 작성하기 2.3 모듈 내보내기 및 불러오기 3. props 3.1 JSX 내부에서 props 렌더링 3.2 컴포넌트 사용 시 props 값 지정하기 3.3 props 기본값 설정: defaultProps 3.4 태그 사이의 내용을 보여주는 children 3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 3.6 propTypes를 통한 props 검증 * isRequired를 사용하여 필수 propTypes 설정 4. state 4.1 클래스형 컴포넌트의 state 4.2 함수 컴포넌트에서 useState 사용..

21-22/21-22 리액트 스타터 -2 2021. 11. 8. 18:49

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이것이 ref(reference의 줄임말) 개념이다. 🐳 리액트 컴포넌트 안에서는 id를 사용하면 안 될까? 컴포넌트를 여러 번 사용한다고 가정할 때, HTML에서 DOM의 id는 유일(unique) 해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기기 때문에 잘못된 사용이 된다. ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 1. ref는 어떤 상황에서 사용해야 할까? -> 'DOM'을 꼭 직접적으로 건드려야 할 때 1) 예제 컴포넌트 생성 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보자! > Validat..

21-22/21-22 리액트 마스터 2021. 11. 1. 19:10

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

21-22/21-22 리액트 스타터 -2 2021. 11. 1. 13:01