리액트 기초 (1)

 

 

 

* React

클래스 안에서 return 된 html 코드를 render() 함수를 사용해 화면에 표시

# 리액트 생명주기
Component 별로 관리 - 생성/변경/소멸

생성
1. render()
: return 되는 html 형식의 코드를 화면에 그려주는 함수
화면 내용이 변경되어야 할 시점에 자동으로 호출된다

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

3. static getDerivedStateFromProps(props, state)
새로운 props를 받게 되면 state를 변경해줌
prop_value 를 전달받은 경우 props.prop_value로 접근 가능
constructor() -> getDerivedStateFromProps(props, state) -> render()

4. componentDidMount()
render()함수가 return 되는 html 형식의 코드를 화면에 그려준 후 실행
화면 그린 후 하는 이벤트 처리 , 초기화 등 에 사용
constructor() ->constructor() -> getDerivedStateFromProps(props, state) -> render() -> componentDidMount()

변경
1. shouldComponentUpdate()
props나 state의 변경 
ComponentDidMount()에서 state 변수의 값이 초기화 / 변경 되는 경우 shouldComponentUpdate함수 실행됨
boolean 유형의 데이터를 반환하는데 return 값이 true 인 경우 변경이 발생했다는 뜻으로 render() 함수가 다시 실행되어
html 코드가 다시 뿌려진다

ES : 표준화된 스크립트 언어

변수 
var / let / const 
var : 변수 재선언 / 재할당 가능
let : 재선언 허용 X / 재할당 가능 

let a = 1;
let a = 3; (X)
a=3; (O)

const : 재할당 허용 X / 재할당 허용 X

전개 연산자

let sumLetArr = [...varArray1, ...varArray2];
//ES6에서는 전개 연산자 ...을 배열명 앞에 붙여 여러개의 배열을 합칠 수 있다
const [sum1, sum2, ...remain] = sumLetArr;
//sumLetArr 배열의 값을 추출해 개별 변수에 넣는다
//순서대로 sum1에 sumLetArr[0],sum2에 sumLetArr[1] 대입
//sumLetArr의 나머지 값은 ...remain변수에 대입된다

객체 :
기존 ES5에서는 Object.assign()함수 이용 
var sumVarObj = object.assign({}, varObj1, varObj2);

var sumLetObj = {...varObj1, ...varObj2};
//...를 사용하여 객체를 합칠 수 있다.
var {key1, key3, ...others} =sumLetObj;
//sumLetObj 객체의 키와 값을 추출해 키와 동일한 명칭의 개별 변수에 넣는다
//나머지는 others변수에 넣는다

 

화살표 함수
https://ko.javascript.info/arrow-functions-basics
function 대신 => 문자열을 사용하여 return 문자열을 생략 / 콜백 함수 내에서도 this를 한번 더 bind 없이 사용 가능

Function2 = (num1, num2) => {
	let num3 = num1 + num2;
}