[1] React.js 시작하기

📌 생명주기 함수

생명주기 : component의 생성, 변경, 소멸 과정을 뜻한다.

1. 생성

• render( ) : 코드를 화면에 그려주는 함수.

• constructor(props) : 생명주기 함수 중 가장 먼저 실행되며, 처음 한 번만 호출된다. 컴포넌트 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화할 때 사용된다.

• static getDerivedStateFromProps(props, state) : constructor( ) 함수 다음으로 실행된다. 컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해준다.

• componentDidMount() : 생성 단계의 생명주기 함수 중 가장 마지막으로 실행된다. 화면이 모두 그려진 후에 실행돼야 하는 이벤트 처리, 초기화 등 가장 많이 활용되는 함수다.

2. 변경

• shouldComponentUpdate(props, state) : boolean 유형의 데이터를 반환하며, return 값이 true일 경우에 render( ) 함수를 한 번 더 호출한다. 이를 이용해 props나 state 변수가 변경될 때 화면을 다시 그리며 제어할 수 있다.

📌 var, let, const

ES5에서 사용하던 var는 유연한 방식으로 변수를 재선언, 재할당할 수 있다.
이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변숫값 변경이 발생할 수 있다.
이러한 var의 단점을 보완하기 위해 ES6에서 let과 const가 추가됐다.

var : 재선언 o, 재할당 o

재선언 & 재할당 시 경고 메시지가 출력돼도 페이지가 정상적으로 표시된다.

let : 재선언 x, 재할당 o

재선언시 에러 페이지가 표시된다. 재할당 시에는 정상적으로 표시된다.

const : 재선언 x, 재할당 x

재선언 & 재할당 시 에러 페이지가 표시된다.

📌 전개 연산자

배열이나 객체 변수를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법이다.
변수 앞에 ... 를 입력해 사용한다.

기존 ES5에서 배열 2개를 합치기 위해서는 각각에 인덱스로 접근해 값을 가져오거나 concat 함수를 이용했고, 객체를 합치기 위해서는 Object.assign() 함수를 이용해야 했다.

ES6에서는 전개 연산자 ... 를 배열명이나 객체명 앞에 붙여 여러 개의 배열을 합칠 수 있다.

var arr1 = [1,2];
var arr2 = [3,4];

// ES5
var sumArr = [].concat(arr1,arr2);
// ES6
let sumArr = [...arr1, ...arr2];
const [sum1, sum2, sum3, sum4] = sumArr;

var obj1 = {key1 : 1, key2 : 2};
var obj2 = {key3 : 3, key4 : 4};

// ES5
var sumObj = Object.assign({},obj1,obj2);
// ES6
let sumObj = {...obj1,...obj2};
var {key1, key2,,} = sumObj;

📌 class

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

📌 화살표 함수

ES6에서 등장한 화살표 함수는 function 대신 => 문자열을 사용하여 ES5 함수보다 간략하게 선언할 수 있다. 또한, 화살표 함수에서는 콜백 함수에서 this를 bind해야 하는 문제도 발생하지 않는다.

📌 forEach( ) 함수

배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다.

• 배열의 처음부터 마지막 순번까지 모두 작업하는 경우 forEach()문을 사용하는 것이 간편하다.
• 특정 순번에서만 배열 값을 사용하거나 변경하는 상황이면 for문을 사용해야 한다.

📌 map( ) 함수

배열 함수 map()은 forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다.
차이점은 return을 사용해 반환 값을 받을 수 있다는 것이다.
(화살표 함수를 사용해 return 구문을 생략할 수 있다.)

📌 jQuery 사용하기

jQuery는 가장 인기 있는 자바스크립트 라이브러리다.
이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해준다.

설치

npm install jquery

jquery를 import 해 $ 기호를 선언한다.
(jquery를 사용할 때 $ 기호를 붙여 사용해야 한다.)

import $ from 'jquery'

참고

index.js에 있는 StrictMode 태그 삭제하기

애플리케이션 내의 잠재적 문제를 알아내기 위한 도구로, 생명주기 함수를 여러 번 실행하는 원인이 되므로 사용하지 않는다.

ES6에 추가된 String 함수들

startsWith( ) : 변수 앞에서부터 일치하는 문자열이 있는지 찾는다.
endsWith( ) : 변수 뒤에서부터 일치하는 문자열이 있는지 찾는다.
includes( ) : 특정 문자열이 포함돼 있는지 판단한다.(T/F 반환)

예제코드 다운로드

https://leejungyeoul.tistory.com/category/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC%20%EC%9C%84%ED%95%9C%20react%20200%EC%A0%9C/%EC%98%88%EC%A0%9C%EC%BD%94%EB%93%9C%20%EC%A0%84%EC%B2%B4%20%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C?page=3