원시타입 참조타입 리렌더링

원시 타입의 종류

1. boolen
2. number
3. string
4. null
5. undefined

원시 타입의 특징

해당 타입의 값을 변수에 할당하면 실제 데이터가 담김 (Value)

let string = 'data1' 
string = 'data2'

메모리에 기존 data1이 할당되어있고 , data2 할당시 메모리에 새롭게할당하여 data2를 생성

참조타입의 종류

원시 타입이 아닌 나머지
1. object
2. array
3. function
4. 정규표현식

참조 타입의 특징

해당 타입의 값을 변수에 할당하면 Memory Address의 주소가 담김.

  let test1 = { text: '1' };
  let test2 = test1;
  if (test1 === test2) {
    console.log('true');
  }

test1이라는 object를 test2에 할당한다면
test2는 test1의 Memory Address주소를 할당하는것이라
둘은 같은 주소를 참조하고있다. 그래서 test2의 값을 변경하는경우,
test1의 값도 같이 변경된다.

React 리렌더링

React에서 리렌더링을하는 조건은
1. 해당 컴포넌트의 State가 변경
2. 상위 컴포넌트로부터 받은 Props의 값을 사용하고있을때 , 해당 Props의 값이 변경되는경우
3. 부모컴포넌트가 리렌더링 되는경우

리렌더링될때 상태 값을 비교하여 진행되는데 이때 얕은 비교를 수행합니다.
객체의 속성을 하나하나 비교하는 것이아닌 참조값만 비교하여 상태를 감지합니다.

얕은복사

얕은 복사란 객체를 복사할때 원래값과 복사된 값이 같은 참조값을 가르키고 있는경우.

1. Spread Operator 전개연산자 => 기존의 값을 유지한채로 새로운 메모리 주소를 할당

 let test1 = { text: '1' };
  let test2 = { ...test1 };
  if (test1 !== test2) {
    console.log('false');
  }

text1의 값을 그대로 가지고오면서, 새롭게 생성된 메모리 주소값을 test2에 할당.
test1과 test2 비교시 false출력

2. 새로운 객체를 반환하는 내장함수
   slice, concat, filter, map 등 es6 함수들!
   http://blog.302chanwoo.com/2017/08/javascript-array-method/