모든 리액트 컴포넌트에는 라이프사이클(수명 주기)가 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 그럼 컴포넌트의 라이프사이클에 대해 알아볼까요? ※ 참고: 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다. 이때 호출하는 메서드는 다음..

21-22/21-22 리액트 스타터 -1 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

자바스크립트 문법 NoSQL 1. NoSQL vs. SQL SQL(MySQL): 규칙에 맞는 데이터 입력 테이블 간 JOIN 지원 안전성, 일관성 용어(테이블, 로우, 컬럼) NoSQL(몽고디비): 자유로운 데이터 입력 컬렉션 간 JOIN 미지원: 동시에 쿼리를 수행하는 경우 쿼리가 섞여 예상치 못한 결과를 낼 가능성이 있음 확장성, 가용성 용어(컬렉션, 다큐먼트, 필드): 고정된 테이블 X 2. 몽고디비 설치하기 1. https://www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB..

21-22/21-22 Node.js 2021. 12. 1. 16:43

1. 데이터베이스란? 데이터베이스란? 데이터베이스 : 관련성을 가지며 중복이 없는 데이터들의 집합 DBMS란? DBMS(Database Management System) : 데이터베이스를 관리하는 시스템 RDBMS(Relational DBMS) : 관계형 DBMS -> 많이 사용됨 - 대표적인 RDBMS : Oracle, MySQL, MSSQL => SQL 언어를 사용해 데이터를 관리 2. MySQL 설치하기 (1) 윈도 MySQL의 공식 사이트(https://dev.mysql.com/downloads/installer/) Download 버튼 눌러서 인스톨러 받기 No thanks, just start my download 클릭하여 다운로드 시작하기 내려받은 파일 실행하여 MySQL Installer ..

21-22/21-22 Node.js 2021. 11. 29. 13: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

4장에서와 같이 웹 서버를 만들 때 코드가 복잡하고 확장성이 떨어지는 문제가 있다. 이를 불편함을 해소하고 편의 기능을 추가한 npm에서 제공하는 웹 서버 프레임워크가 있다. 익스프레스가 대표적이다. 6.1 익스프레스 프로젝트 시작하기 먼저 learn-express 폴더를 만든다. 항상 package.json을 제일 먼저 생성해야 한다. 직접 파일을 만들어도 되고 명령어를 콘솔에서 호출해도 된다. version이나 description, author license는 자유롭게 수정 가능하다. $ npm i express $ npm i -D nodemon // package.json { "name": "learn-express", "version": "0.0.1", "description": "익스프레스를 ..

21-22/21-22 Node.js 2021. 11. 15. 13:00