1. 라이프사이클 메서드의 이해 1) 라이프 사이클 메서드의 종류(9가지)> Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드 2) 라이프 사이클의 종류 마운트 : 페이지에 컴포넌트가 나타남 업데이트 : 컴포넌트 정보를 업데이트 언마운트 : 페이지에서 컴포넌트가 사라짐 (1) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. (2) 업데이트 컴포넌트가 업데이트하는 경우들 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 (3) 언마운트 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmo..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00

import React, {useState, useReducer} from 'react'; function reducer(state, action){ return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(reducer, { name: '', nickname: ''}); const {name, nickname} = state; const onChange = e => { dispatch(e.target); }; return ( 이름: {name} 닉네임: {nickname} ); }; export default Info; Hooks는 함수형 컴포넌트에서도 상태 관리를..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00

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

1. 자바스크립트 배열의 map() 함수 🐳 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성해준다. 1) 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 ❗ map 함수 사용해보기 const numbe..

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

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

2.1 코드 이해하기 import React from 'react'; 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다. 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다. 모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다. → 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.) 번들러 (bundler) 종류: 웹팩, Parcel, browserify 등 이 중, 리액트에서는 웹팩을 사용합니다. import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 최적화 과정에서 여러 개의 파일로 분리..

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

1.1 왜 리액트인가? 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효고를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 일렉트론(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 슬랙, VS Code 등을 개발하고, 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크를 사용해 페이스북, 디스코드 등의 애플리케이션도 개발했습니다. 이러한 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용합니다. 이들이 지닌 공통점은 모델과 뷰가 있다는 것인데, 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역,..

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

5. 노드 내장 모듈 사용하기 (1) os os모듈에 운영체제의 정보가 담겨 있어 해당 정보를 가져올 수 있음 process 객체와 겹치는 부분이 있음 일반적인 웹 서비스에는 사용빈도가 높지 않으나 운영체제별로 다른 서비스를 제공하고자 할 때 유용 os.arch(): 운영체제 아키텍처, process.arch와 동일 os.platform(): 운영체제 플랫폼, process.arch와 동일 os.type(): 운영체제 종류 os.uptime(): 운영체제 부팅 이후 흐른 시간(초) cf)process.uptime(): 노드의 실행시간 os.hostname(): 컴퓨터의 이름 os.release(): 운영체제의 버전 os.homedir(): 홈 디렉터리의 경로 os.tmpdir(): 임시 파일 저장 경로 ..

21-22/21-22 Node.js 2021. 10. 30. 21:34

8. Objects ● Objects 1. Introduction to Objects 객체를 들어가며 자바에는 7개의 데이터 타입이 있다. - string, number, boolean, null, undefined, symbol, objects -자바스크립트(Javascript)의 기본 타입은 객체(Object) 객체를 사용하면 실제 사물을 모델링하거나 데이터 구조를 구축할 수 있다. 사과(apple), 테이블(table), 아기(baby), 지렁이(worm)을 객체로 만들 수 있다. *객체: 속성값과 행동을 가진 데이터 타입 *객체 모델링: 객체의 속성과 동작을 추려내어 객체로 구현하는 과정 2. Creating Object Literals 객체 리터럴 만들기 객체를 선언할 때 기본구조 - 객체를 변..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:02

8. Objects 8-1. Objects 객체를 빼놓고 자바스크립트를 논하는 것은 불가능할 정도로, 객체는 자바스크립트의 많은 곳에 스며들어 있습니다. 객체를 배우지 않더라도 이미 자바스크립트를 사용하고 있었으니까요! 자바스크립트에서 다루는 데이터 유형은 총 7개인데, 이 중 6개는 기본 데이터 유형인 String, number, boolean, null, undefined, symbol입니다. 그리고 마지막 유형은 이번에 다룰 Object, 객체입니다. 8-1-1. Creating Object Literals (객체 리터럴 만들기) 객체는 다른 자바스크립트 유형과 마찬가지로 변수에 할당할 수 있습니다. 객체 리터럴을 지정하기 위해서는 아래와 같이 {}, 중괄호를 사용합니다. let spaceship ..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:02

7. Iterators ● High-order Functions 1. Introduction 고차 함수는 다른 함수를 인수로 받아들이거나 반환값을 함수로 내보내는 함수이다. 함수에 함수를 포함함으로써 프로그래밍의 추상화 수준을 높여주는 고차 함수에 대해서 알아보자. 2. Function as Data 데이터로서의 함수 자바스크립트의 함수는 다른 여느 자료형과 같은 용례를 갖는다. 함수를 변수에 할당할 수도 있고, 새로운 변수에 재할당할 수도 있다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 가독성을 해칠 정도로 긴 이름을 가진 함수가 있다고 하자. 이 함수의 동작을 반복..

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