전화번호 부 만들기 튜토리얼 2/4 (Section 7)

참고> velopert.com/3636

 

1. React 에서는 state 내부의 값을 직접적으로 수정하면 절대 안됨 => 불변성 유지
-> push, splice, unshift, pop 안됨
-> concat, slice, map, filter 사용
-> React의 re-rendering을 위한 조치

2. Component 내부에서 사용하는 값들 중, 렌더링과 관계 없는 변수들은 굳이 state에 넣어줄 필요가 없음. 그냥 Component 클래스의 내부 변수로 관리.

3. 컴포넌트를 여러개 렌더링하려면, 그냥 JavaScript 배열의 내장 함수인 map을 사용하면 된다.

4. Component가 자신의 부모로부터 props 받아서 어떤 처리를 한다고 가정해볼 때, 프로그래머가 실수로 props를 부모로부터 전달해주지 않을 경우 Component는 크래쉬가 난다. 이를 방지하기 위해 Component 내부에 defaultProps를 기본값으로 설정해주면 좋다.

5. React에서 배열을 렌더링할 때에는 key 값을 꼭!! 넣어주자. 없어도 동작은 하는데 이 경우엔 React에서 내부적으로 배열의 인덱스를 key값으로 사용한다.

이러면 문제점이 배열의 중간에 새로운 원소가 insert되었을 때 그 이후의 모든 원소들의 인덱스가 바뀌고, 그에 따라 key값도 다 바뀌게 된다. React는 이 변화된 모든 원소들을 re-rendering해야하는 것이다. 새로 추가된 원소는 하나뿐인데 말이다.

그래서 프로그래머가 key값을 고유 값으로 생성해서 넣어주면 React는 인덱스로 key 값을 부여하지 않게 되고,

배열의 중간에 원소가 insert 되더라도 인덱스의 밀림과 관계 없이 새로운 원소 하나만 re-rendering 해주면 된다.
즉, 효율적인 React Coding을 위해 배열을 사용할 땐 고유의 key값을 생성해서 넣어주자.