[Java Script] ES6 문법 찍먹하기, react 기초 정리

React에서 생명주기란 컴포넌트의 생성, 변경, 소멸 등을 말함
render(), constructor(), getDerivedStateFormProps(), componentDidMount() 함수들은 컴포넌트 생성 과정에 속함

render()는 return되는 html 형식의 코드를 화면에 그려주는 함수임

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

getDerivedStateFormProps(props, state) 함수는 constructor() 함수 다음으로 실행됨
컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해줌
예시 ->

static getDerivedStateFromProps(props, state) {
  console.log('2. getDerivedStateFromProps Call : ' + props.prop_value);
  return {};
}

componentDidMount() 함수는 생성 과정에 속하는 함수 중 가장 마지막으로 실행됨
render() 함수가 return되는 html되는 html 형식의 코드를 화면에 그려준 후 실행된다.
-> 화면이 그려진 후에 실행돼야 하는 이벤트 처리, 초기화 등에 가장 많이 활용되는 함수

shouldComponentUdate() 함수는 변경과정에 속한다.
변경이란 props나 state의 변경을 말함
props나 state가 변경되면 실행된다.

템플릿 문자열
따옴표가 아닌 백틱(`)으로 전체 문자열과 변수를 묶어 사용한다.
변수는 ${변수명}으로 쓰고, 코드상에서 줄바꿈을 하면 개행문자 없이도 사용할 수 있다.

ES6에 추가된 String 함수
1. startsWith : 변수 앞에서부터 일치하는 문자열이 있는지 찾음
2. endsWith : 변수 뒤에서부터 ''
3. includes : 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단함
-> true 혹은 false를 반환함

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

var varArray1 = ['num1', 'num2'];
var varArray2 = ['num3', 'num4'];
let sumLetArr = [...varArray1, ...varArray2];
console.log(`${sumLetArr}`); // num1, num2, num3, num4

var varObj1 = { key1 : 'var1', key2 : 'var2'};
var varObj2 = { key2 : 'new2', key3 : 'val3'};

var sumLetObj = {...varObj1, ...varObj2};
console.log(JSON.stringify(sumLetObj)); // {"key1":"var1","key2":"new2","key3":"val3"}

var {key1, key3, ...others} = sumLetObj;
console.log(key1, key3, JSON.stringify(others)); // var1 val3 {"key2":"new2"}

3번 줄에서 ...을 사용해 두 배열을 합침
9번 줄에서 ...을 사용해 두 객체를 합침 중복되는 key2의 값은 new2이가 됨
'...varObj2, ...varObj1'로 작성한다면 {"key2":"var2","key3":"val3","key1":"var1"} 출력
12번 줄에서 sumLetObj의 키와 값을 추출해 키와 동일한 이름의 변수에 값을 넣는다.
그 외 나머지는 ...others 변수에 넣는다.
따라서 변수 key1은 var1, key3은 var3, others는 {"key2:"new2"}라는 값이 할당된다.
생성자 함수가 실행되고 파라미터로 전달받은 num2라는 변숫값을 객체 변수 number2에 저장한다.

* ES6에선 객체를 class로 선언함

화살표 함수
: function 대신 => 문자열을 사용하며 return 문자열을 생략할 수도 있음
따라서 기존 ES5 함수보다 간략하게 선언할 수 있다.
또, 콜백함수에서 this를 bind해야 하는 문제도 발생하지 않는다.

---

'리액트 200제'라는 책을 공부하기 시작했는데, 처음부터 js ES6문법을 알려주어서 좋다고 생각했다.

빨리 응용편!! 하고 싶다!!