-

데이터 분류1. 원시 타입(Primitive Type)원형데이터로 더이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태Boolean, String, Number, Undefined, Null, Symbol2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외한 모든 타입이 포함원형 데이터가 아닌 다른 데이터를 참조하는 데이터Array, Object, Date ...데이터 타입 종류타입설명Number숫자string문자열boolean- true: any other value- false : 0, null, undefined, NaNnull명확하게 빈 값인 경우 ※ type은 object 에 속함undefined데이터가 정해지지 않은 상태- 변수에 데이터를 대입하지 않은 경우- ..

배열자바스크립트의 기본 데이터 타입 []안에 데이터 입력타입에 상관없이 사용 가능배열에 배열, 객체도 저장 가능배열 초기화// 빈 배열const arr1 = []// 데이터가 있는 배열 정의const arr2 = [2,3,1]// 배열 안에 배열 정의const arr3 = [[11,22], [33,44]]// 배열 안에 객체 정의const arr4 = [{name :'a'}, {name:'b'}]// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)const arr5 = new Array('1', '2')배열 길이 확인메서드설명결과배열.length배열 길이 반환숫자배열 요소 추가/삭제배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환메서드..

문자열 길이 이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남 4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용 메서드 설명 결과 문자열.length 문자열의 길이 정수 Array.from(문자열).length 문자열의 길이 정수 '😋'.length Array.from('😀').length // ⇒ 1 문자열 길이형식 문자열이 지정한 길이가 될 때까지 작업을 반복 지정한 길이가 실제 문자열 길이보다 짧은 경우 변한없이 기존 문자 반환 추가문자열 생략하면 공백으로 입력 메서드 설명 결과 문자열.padStart(전체길이, [추가문자열]) 해당 문자열의 시작부터 전체길이가 될때까지 추가 문자열을 반복 문자 문자열.padEnd(전체길이, [추가문..

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

LifeCycle (수명주기) 리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재 컴포넌트의 수명 : 페이지에 렌더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 클래스형 컴포넌트에서만 사용 가능 함수형 컴포넌트의 경우 Hooks를 사용하여 제어 라이프 사이클 메서드 라이프 사이클 메서드는 9개의 종류를 가지며, 컴포넌트 클래스에서 덮어써 사용 가능 Will- : 작업을 작동하기 전 실행되는 메서드 Did- : 작업을 작동한 후 실행되는 메서드 componentDidCatch v16이후부터 도입된 메서드로, 렌더링 도중 오류 발생 시 오류 UI를 보여주도록 처리 자신에게 발생된 에러는 잡을 수 없으며 this.props.children으로 전달되는 컴포넌트에서 발새한 에러만 추출 가능 c..

React ref DOM을직접 제어해야 할 경우 ref를 활용하여 이름을 부여하여 컴포넌트 내부에서만 활용하도록 하는 기능 state로 제어 불가능한 경우 ref를 활용해야 하는 경우 특정 input에 focus 스크롤 박스 제어 Canvas 요소 사용 다른 컴포넌트 간에 데이터 교류에 ref 사용 x ref 사용방법 1. callback 함수 활용 기본적으로 사용되는 방식 ref 콜백함수를 props로 전달하며, 콜백함수는 ref값을 파라미터로 전달받고, 함수내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정 // this.input이 input 요소의 DOM을 가리킴 {this.input=ref}}/> 2. createRef 활용 리액트 v16.3이상 지원 내장함수 createRef 사용 ..

React Event 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하여 사용방법이 유사함 이벤트 사용시 유의사항 이벤트 이름 : CamelCase 표기법 사용 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해줌 // 1. 외부에서 함수 생성 후 호출 const Func=()=> {} // 2. 태그 내에서 함수를 만들어 사용 {console.log(1); }}> DOM요소에만 이벤트를 설정할 수 있고, 직접 만든 컴포넌트 요소에는 이벤트를 자체적으로 설정할 수 없음 // 직접 사용 불가 // 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능 Sources 클래스 컴포넌트 활용 input 입력 출력 import { Component } from 'react..

state 컴포넌트 내부에서 바뀔수 있는 값 클래스형 컴포넌트의 경우 state / 함수형 컴포넌트인경우 useState로 사용 클래스 컴포넌트의 state state 초깃값 설정 // [기본문법] // state 초깃값 설정 state = { 속성: 값, 속성: 값 }; // [constructor 메서드 사용한 문법] constructor(props) { super(props); // state 초깃값 설정 this.state = { 속성: 값, 속성: 값 }; } constructor 메서드를 활용한 state constructor 메서드를 작성하여 state 설정 - 객체 형식으로 작성 반드시 super(props) 메서드를 호출하여 클래스 컴포넌트가 상속하고 있는 리액트 컴포넌트 클래스가 지닌 ..

기본 코드 이해 react 기본 사용 리액트를 불러와서 사용할 수 있게 해주 create-react-app 으로 프로젝트 생성 시 node_modules 디렉토리에 react 모듈이 설치 됨 이를 import 구문을 통해 사용 모듈을 불러와서 브라우저에서 사용하기 위해 번들러(웹팩, Parcel, broswerify)를 사용하며 번들러 도구 사용 시 import 로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해줌 import React from 'react';

작업 환경 Setting 절차 Node.js, npm 또는 yarn 설치 git creative-react-app create-react-app 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정을 생략하고 바로 프로젝트 작업 환경을 구축해주는 도구 자유로운 설정 변경 가능 프로젝트 생성 1. 프로젝트 생성 // yarn yarn create react-app // npm npm init react-app 2. 서버 구동 해당 디렉토리 이동 후 서버 구동하여 브라우저 창이 열림 cd // yarn yarn start // npm npm start