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

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

INDEX 1장 리액트 시작 1. 왜 리액트인가? ● 리액트의 이해 2. 리액트의 특징 ● DOM이란? ● Virtual DOM ● 기타 특징 3. 작업 환경 설정 ● Node.js와 npm, yarn ● 에디터 설치 ● Git 설치 ● create-react-app으로 프로젝트 만들기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 1. 왜 리액트인가? ● 리액트의 이해 자바스크립트는 단순한 스크립트 언어에 불과하지만 웹 애플리케이션에서 가장 핵심적인 역할 슬랙, VS CODE 등의 데스크톱 애플리케이션 ➨ 일렉트론으로 개발 자바스크립트의 여러 프레임워크를 사용하여 페이스북, 디스코드 등 수많은 애플리케이션 개발 # 일렉트론: 자바스크립트로 데스크톱 앱을 개발하는 도구 ..

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

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component{ render() { const name = "react"; return {name} } } export default App; 클래스형 컴포넌트의 특징은 ① state 기능 ② 라이프사이클 기능 ③ 임의 메서드 정의 클래스형 컴포넌트에는 render함수가 반드시 있어야 하고, JSX를 반환해주어야 합니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const n..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 리액트의 이벤트 시스템 이벤트 : 사용자가 웹브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 작성법은 일반 HTML에서의 이벤트 작성법과 비슷합니다. ※주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 ② 이벤트 설정 시 함수 형태의 객체 전달 - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니다. ③ DOM 요소에만 이벤트 설정 가능 - 직접 만든 컴포넌트에는 이벤트 자체 설정 불가 그냥 이름이 onClick인 props를 컴포넌트에게 전달할 뿐 ⇨ 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정은 가능하다. ▶이벤트 종류 더보기 더보기 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 코드 이해하기 import React from 'react'; 리액트를 불러와서 사용할 수 있게 해주는 코드 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다. 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다. ▶ 번들러의 사용 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다. 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다. 리액트는 웹팩 번들러를 사용한다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:01