React LifeCycle

React의 Component는 생성주기가 존재한다.
크게 생성 - 수정 - 삭제 의 과정을 거치는데, 각 시점마다 원하는 처리를 할 수 있도록 함수들을 만들어 두었다.

물론 해당 함수들은 함수형 컴포넌트에서 직접 사용할 일은 없다. 대신 hook을 이용해 시점에 따른 처리가 가능하다.

(위의 과정을 보면 알 수 있지만, render() 나 componentDidUpdate() 에서 setState를 해주면 무한루프에 빠지면서 좋아죽는 모습을 볼 수 있다.)

Virtual DOM

우리의 HTML은 element들 간의 부모-형제-자식 관계가 명확한 DOM트리 형태를 띄고 있다. 따라서 한 element의 데이터가 바뀐다고해서 하나만 바뀌지 않는다.

기본적으로 데이터가 바뀌면 re-rendering이 발생한다. react에서 데이터라함은 state와 props를 들 수 있다. re-rendering 과정이 발생하면, 자신을 포함한 자식들 모두에게 리렌더링이 발생한다. 따라서 깊이가 깊을 수록, 불필요한 렌더링이 발생해 브라우저의 자원을 소모하게 된다.

이를 해결하기 위해 React에서는 Virtual DOM이라는 개념을 사용한다. 일종의 더블 버퍼링같은 것이다. 메모리에 DOM과 동일한 형태의 트리구조를 준비해놓고, 데이터에 변화가 있으면 Virtual DOM을 수정한다. 그리고 실제 DOM과 비교해 바뀐 부분이 있으면 그 부분만 수정한다. (덮어쓴다고 해도 좋지 않나..)

상황따라 가상돔을 사용하지 않는 게 좋을 수 있다고 한다.

Component Update가 발생하는 4가지 경우

1. state가 변했을 때
2. props가 변했을 때
3. 부모 component가 update 되었을 때
4. 강제로 Update 했을 때(forceUpdate())

ref

React에서 element에 접근하기 위해 사용된다.
"그냥 getElementBy~() 나 querySelector() 로 가져오면 안되나?"
고 할 수 있다.

React 특성상 가상DOM에 그려놓고 나중에 실제 DOM에 업데이트하기 때문에, 위의 방법대로 한다면 해당 element가 없을 수도 있다.

class형 component의 경우 React.createRef(),
function형 component의 경우 useRef()를 사용한다.

// class형
class ClassRef extends React.component {
  constructor(props) {
    super(props);
    this.refEle = React.createRef;
  }

  render() {
  	return <input type="text" ref={this.refEle} />
  }
}
  
// function형
const FuncRef = () => {
  const refEle = useRef();
  
  return <input type="text" ref={refEle} />
}

State 관리

단방향 데이터 흐름

React에서 데이터는 부모 -> 자식 방향으로 고정되어있다. 앞서 state나 props가 update되면 re-rendering이 일어난다고 했다. 부모가 state를 변경해 re-rendering이 된다면, 자식도 re-rendering이 일어난다. 여기서 자식이 부모에게 state나 props를 넘겨줄 수 있다면 어떻게 될까. 자식은 state를 변경할 것이고, 부모 역시 넘겨받은 state로 인해 re-rendering이 일어날 것이다. 부모가 re-rendering이 일어났으니, 자식도 re-rendering이 일어날 것이다. 결국 무한루프에 빠져 좋아죽는 모습을 보일 것이다.

drag & drop Event

과거 element를 대상으로 drag & drop을 구현하기 위해선 mousedown, mouseup, mousemove 이벤트를 사용해야했다(물론 다른 방법도 있을 것이다..). 하지만 최근 HTML에 해당 기능을 편하게 구현할 수 있게 drag & drop 관련 이벤트가 추가되었다.
dragstart, dragend, dragover, drop 등 관련된 다양한 이벤트가 존재하는데, 기본적인 사용법을 정리해봤다.

1. drag 하고자 하는 element에 draggable="true" 속성을 추가해준다.
2. drop 하고자 하는 element에 drop, dragover event를 추가해준다.
3. drop, dragover 이벤트에는 상황에 따라 e.preventDefault(), e.stopPropagation() 이용해 연속으로 이벤트가 발생하지 않도록 한다.

(강아지 사진에 draggable=true 옵션을 넣고, O와 X에 drop, dragover 이벤트를 추가해 구현한 모습이다.)

기타

• React.StrictMode 로 감싸진 component는 lifecycle이 2번 실행된다고 한다.
  (나의 경우엔 1번만 실행되었다.)
• componentDidUpdate() 에서는 첫 번째 인자와 두 번째 인자에 각각 이전 props와 이전 state가 담겨있다.
  (componentDidUpdate(prevProps, prevState))
• 일정 길이의 배열을 만들어 주는 Array 내장함수: Array.from({length: n}, mapFunc)