DO MY BEST

밑에 처럼 기존 배열에 push를 하면 배열이 하나만 있는 것이다. 이러면 리액트가 뭐가 바뀌었는지 감지를 못한다. 

const array = [];

array.push(1);

그래서 

const array2 = […array, 2]

기존 배열을 복사 해놓고 새로운 값을 넣어주는 형태이다.

리액트가 이것을 감지할 수 있는 이유가 기존 배열이랑 새로운 배열이랑 다르기 때문이다.

array === array2

=> false

리액트가 렌더링하는 기준이 예전 state랑 현재 state가 다르면 렌더링을 하는 것이다. 즉 참조가 바뀌어야한다.

const array = [];

array.push(1);

arr === arr
=> true

이러면 리액트가 바뀐 것이 없다고 판단하여 렌더링을 하지 않는다. 그래서 리액트를 할 때 push를 하면 안된다.

onSubmitForm에 this를 출력해보면

리액트 내부가 나온다. 만약 “ this.onChangeInput = this.onChangeInput.bind(this); “를 주석처리 해보면

this가 undefined가 되는걸 볼 수 있다.

화살표 함수가 bind(this)를 자동으로 해주는 기능을 한다.

onSubmitForm = (e) => {

       console.log(this.state.value);

}

최종적으로

화살표 함수를 사용하면 이렇게 편리하게 사용할 수 있다.

위와 같은 코드가 밑에와 같은 결과가 나온다. 너무 길어지니깐 다른 파일에 따로 <li> 부분을 떼어낼 수 있다.

• 다른 파일로 빼는 이유는 가독성적인 면도 있지만 반복문에서 성능 문제가 발생하기 때문에 성능적인 것도 있음

다음과 같은 방법으로.

그러나 위와 같이 하면 v와 index가 Try에 전달이 안된다. 전달을 하는 것이 바로 Props 이다.

       💡 html에서는 attribute라고 부르는데 React에서는 Props라고 부른다.

       💡 Props: 부모한테 받을 때 사용한다.

밑에와같이 하면 Props가 전달이 된다.