DO MY BEST

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가 전달이 된다.

결과:

응용

위에를 반복문으로 하기에는 두 가지 방법을 생각해볼 수 있다. 1) 2차원배열로 하기. 2) 객채로하기

1. 2차원 배열

2. 객체로

객체로 하는 반복문을

가독성 + 성능을 둘 다 잡을 수 있는 것이 Props 이다.

• 이 key는 리액트가 나중에 성능을 최적화 할 때 사용하는 것이다.
• 리액트는 key를 보고 같은 컴포넌트인지 아닌지 판단을 한다.
• 리액트에서 key를 기준으로 엘리먼트를 추가하거나 수정 삭제 판단하기 때문에 배열의 순서가 바뀌면 문제가 생긴다.

key는 고유한 값을 찾아야한다. 밑에처럼.

index를 key에 넣으면 나중에 성능 최적화할 때 문제가 생기기 때문에 안된다. key의 역할이 성능 최적화인데 역할이 무의미 해진다.

가독성 있게 밑에와 같이 배열을 따로 빼놓아도 된다.