React 200제(9~16번 실습)

2021.11.01일 기록

✅ PART1. 입문 완료 !

 

009. 템플릿 문자열 사용하기

010. var let conset 사용하기

011. 전개 연산자 사용하기

012. class 사용하기

013. 화살표 함수 사용하기

014. forEach()함수 사용하기

015. map()함수 사용하기

016. jquery 사용하기

 

 

009. 템플릿 문자열 사용하기

ES는 표준화된 스크립트 언어이고 ES뒤에 붙은 숫자자는 버전을 의미한다. 2015년 발행된 ES6는 많은 유용한 기능이 추가되었고 자바스크립트는 이 기술 규격을 따른다.

 

기존 스크립트에서는 문자열과 변수를 합치기 위해서는 문자열을 작은 따옴표 또는 큰따옴표로 감싸고 +로 연결해서 사용해야했다. 

따옴표가 아닌 백틱(`)으로 전체 문자열과 변수를 묶어서 사용할 수 있다.

 

ES6에 추가된 String 함수!

startWith() - 변수 앞에서부터 일치하는 문자열 찾기

endWithI() - 변수 뒤에서부터 일치하는 문자열 찾기

includes() - 특정 문자열 포함 여부 찾기

 

 

010. var let const 사용하기

 

 

011. 전개 연산자 사용하기

전개 연산자는 배열이나 객체 변수를 좀더 직관적이고 편리하게 합치거나 추출할 수 있도록 도움을 주는 문법이다.

변수앞에 ...(마침표 3개)를 입력해서 사용한다.

기존 ES5에서 배열 2개를 합치기 위해서는 직접 배열에 인덱스로 접근하여 값을 가져오거나 concat함수를 이용해서 가져왔다.

 

ES6에서는 전개 연산자 ...(마침표 3개)를 배열명 앞에 붙여서 여러개의 배열을 바로 합칠 수 있다.

 

 

기존 ES5에서 객체 2개를 합치기 위해서는 Object.assign()함수를 이용해야 한다. 첫 번째 인자 {}는 함수의 return값이고 뒤의 인자에 객체들은, (콤마)로 연결해 나열하면 여러개의 객체를 합칠 수 있다.

 

012. class 사용하기

기존 ES5 자바스크립트에서는 객체를 구현하기 위해 prototype을 사용한다. 객체는 상속을 통해 코드를 재사용 할 수 있게 해준다. ES6에서 등장한 class는 prototype과 같은 개념이며, 쉽게 읽고 표현하기 위해서 고안된 문법이라 할 수 있다.

생성자 함수명.prototype.함수명 형태로 선언해주면, 객체 외부에서 함수를 실행해 객체 내부에 선언된 함수로 사용할 수 있다. 함수가 실행되면 생성자 함수에서 '200'으로 할당된 객체변수 number를 사용한다.

013. 화살표 함수 사용하기

ES6에서 등장한 화살표 함수는 function 대신 => 문자열을 사용하여 'return'문자열을 생략 할 수 있다.

화살표함수에서는 콜백함수에서 this를 bind해야하는 문제도 발생하지 않는다.

Function 1~5 까지의 함수가 순서대로 호출된다.

함수를 호출할때 전달받은 num1이라는 변수는 함수 내부에서 사용할 수 있다.

this로 컴포턴트의 state변수에 접근하여 사용 간으하다.

 

콜백함수 내부에서는 컴포넌트에 this로 접근할 수 없기때문에 접근 할 수있는 변수에 this를 백업한다. 백업된 변순,ㄴ this_bind를 이용해 컴포넌트의 state변수에 접근 할 수 있다.

 

014. forEach()함수 사용하기

배열 함수 forEach()는 for문에서 사용하면 순번과 배열의 크기 변수를 사용하지 않느다. 배열의 처음부터 마지막 순번까지 모두를 작업해야하는 경우 forEach()문을 사용하는것이 간편하다.

var i 가 0부터 시작하기 때문에 배열의 크기보다 1이 작은 값이 될때까지 새로운 함수(For_newArr)에 기존 함수의 값을 넣어준다.

 

반복문이 실행될때마다 콜백함수로 결과값(result)을 받아 새로운 함수에 넣는다.

 

015. map()함수 사용하기

배열함수 map()은 forEach()와 마찬가지로 for문을 사용하던 순번과 배열에 크기를 변수에 사용하지 않는다. 

차이점으로는 map()은 forEach()달리 return을 사용해 반환값을 받을 수 있다는 것이다.

가져올 변수 x에 넣은 후 그대로 반환해 (x=>x)순서대로 쌓아 놓는다. 마지막 요소까지 반복했다면, 한번에 새로운 배열에 저장한다.

(화살표 함수는 return을 생략가능하여 (x=>{return x})와 동일하게 동작한다.)

016. jquery 사용하기

jquery를 사용하기 위해서는 cmd창을 열어 client가 있는 폴더 경로로 이동하여 [npm install jquery]를 입력하여 설치해야 한다.

맨위에 import $ from 'jquery';라고 임포트하여 사용한다.(기호 $ 사용할것)