Week9(React)

리액트 컴포넌트 내부의 특정 DOM에 대해 id가 아닌 ref를 사용하는 이유는 id를 사용하게 되면
id의 중복이 발생할 확률이 높기 때문이다. 하나의 프로그램을 만들 때 수많은 컴포넌트를 만든다.
id 요소는 전역적으로 발생하기 때문에 이 수많은 컴포넌트의 내부에 있는 id의 이름들이 모두 각각
달라야 한다. 하지만, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다. 이 때문에
이런 문제를 야기시키지 않는다. 
따라서, id를 쓸 수도 있지만, ref를 쓰는 것이 훨씬 좋은 선택이다.

이 ref를 사용할 때는 DOM에 직접적으로 접근해야 할 때이다. 직접적으로 접근해야만 하는 경우는
특정 input에 포커스를 주어야 할 떄, 스크롤 박스를 조작해야 할 떄, Canvas 요소에 그림을 그려야 할
때 등이 존재한다.
(DOM에 대한 정의, 설명등을 읽어봤지만 솔직히 DOM을 직접적으로 건든다는 말이 무엇을 의미하는
것이지 잘 이해가 가지 않는다....)

함수형 컴포넌트에서는 ref를 useRef라는 Hook 함수를 통해 사용한다.

 

react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook

 

---

React에서는

const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map(name => <li>{name}</li>);

이런 식으로 데이터 배열을 컴포넌트 배열로 변환시킨다. 

---

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.
key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다.
하지만, key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.
이 때문에 key 설정을 하지 않아도 프로그램이 동작하기는 하지만 성능면에서 안 좋은 영향을 끼친다.

이 key 값은 map 함수의 인자로 전달되며 반드시 unique해야 한다. 만약 key값으로 설정할만한
unique한 요소가 존재하지 않는다면 map 함수에 전달되는 콜백 함수의 인수인 index를 사용하면 된다.

 

const nameList = names.map((name, index) => <li key={index}>{name}</li>);

하지만, 반드시 고유한 값이 없을 때만 index 값을 key 값으로 사용해야 한다.  index를 key로 사용하면
배열이 변경될 때 효율적으로 리렌더링 되지 못한다.

---

배열에 새 항목을 추가할 때는 배열의 push 함수가 하닌 concat 함수를 사용, 배열의 특정 데이터를 제거하고 싶을 때는  filter 함수를 사용한다.

리액트의 성능을 위해서는 반드시 불변성 유지를 해주어야 한다. 불변성 유지란 상태를 업데이트할 때 기존 상태는 그대로 두면서 새로운 값을 상태로 설정하는 것이다. 이 불변성 유지를 위해서는 배열의 함수 중에서도 기존 배열에 데이터를 추가하는 함수가 아닌 아예 새로운 배열을 만들어내는 함수를 사용해야 한다.

---

컴포넌트가 업데이트되는 4가지 경우

 

1. props가 바뀔 때

2. state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. this.forceUpdate로 강제로 렌더링 트리거할 때

 

Mount - DOM이 생성되고 웹 브라우저상에 나타나는 것은 마운트라고 한다.

Unmount - 마운트의 반대과정, 컴포넌트를 DOM에서 제거하는 것을 말한다.

 

7장의 컴포넌트의 라이프사이클은 따로 정리하지 않고 읽어만 본다.