숙제 해설 : 블로그 글 수정버튼 만들기

함수의 () 여부의 차이

<button onClick={ 제목바꾸기  }>버튼</button>   

=> 여기 부분에 제목바꾸기라는 함수가 들어간다

=> 근데 여기에 ()를 치면 안된다. 왜냐하면 ()가 들어가면 클릭해서 작동해야하는데 그냥 먼저 작동한다

=> 1일1js 하면서 공부했던 기억이 난다 아싸바리요 이러면서 실력이 느는거 아니겠는가 공부한게 나왔다 싶다!

state 변경시 반드시 변경 함수를 거쳐야한다.

  function 제목바꾸기(){
    글제목[0] = 1;
  }

=> 이렇게 직접적으로 변경하면 변경될지는 모르지만 반영이 안됨.
=> 그러므로 웹앱처럼 바로바로 변경이 되려면 ...

  function 제목바꾸기(){
    글제목변경();
  }

=> 글제목변경 함수는 state를 아예 대체를 해버리는 함수
=> 그러므로 안의 형식을 맞춰서 대체해줘야한다.

  function 제목바꾸기(){
    글제목변경(['여자코트 추천', 'ㅁ', 'ㅠ']);
  }

=> 그런데, 이건 ㅈㄴ 하드코딩 개발자스럽게 코딩하려면
=> 글제목[0] = 1 막 이렇게 state에 직접 접근해 원본 state를 수정하는건 불가능
=> Vue에서 action으로 바로 데이터에 접근 못하는 거랑 비슷한듯

=> 이건 하나의 관습이자 스킬 그냥 복사한다.
=> 근데 swallow 카피가 아니라 deep copy를 해야한다.

=> 그냥

var newArray = 글제목;

=> 는 js에서 복사가 아니라 그냥 값 공유가 된다. 그래서 복사한다고 해놓은 변수를 변화를 주면 원본 값에도 영향을 주게 된다. 이건 복사가 아니지.. 그냥 링크 연결이지...

https://youtu.be/fD0t_DKREbE

=> 해당 영상에서 정확히 나오는데 (영어 ;;)
=> obj는 swallow 카피가 되고
=> 그냥 값 같은경우는 복사처리가 된다.

=> 그래서 ... 스프레드를 박아준다. deep copy가 된다.
=> ES6의 신 문법인 spread operator는 대괄호든 중괄호든 풀어준다. 그리고 바끝의 []으로 다시 담는것! 완전히 별개의 데이터가 된다. 복사 성공!

=> state 데이터를 갈아치워버린다!!!!!! 로 이해하고 암기!!!!

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자코트 추천';
    글제목변경( newArray );
  }

=> 리액트 대 원칙 : immutable data