✔ 리액트의 이벤트 시스템

• 1. 이벤트 이름은 카멜 표기법으로 작성
• 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수형 데이터의 값을 전달합니다.
• 3. DOM 요소에만 이벤트를 설정할 수 있습니다.

주로 쓰는 이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• UI
• Wheel
• Media
• Image
• Animation
• Transition

✔ Lifecycle

• 종류는 총 9가지입니다.
• Will 접두사가 붙은 메서드는 작업을 작동하기 전에 실행되고,
  Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 입니다.

이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써서 선언함으로써 사용할 수 있습니다.

라이프사이클은 마운트, 업데이트, 언마운트 카테고리로 나눕니다.

마운트

: DOM 이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다.
호출하는 메서드는 다음과 같습니다.

컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount

• constructor
  : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다.
• getDerivedStateFromProps
  : props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.
• render
  : 우리가 준비한 UI를 렌더링하는 메서드입니다.
• componentDidMount
  : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드입니다.

업데이트

컴포넌트는 다음과 같은 네 가지의 경우에 업데이트를 합니다.

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate로 강제로 렌더링을 트리거할 때

컴포넌트를 업데이트할 때는 다음 메서드를 호출합니다.

1. 업데이트를 발생시키는 요인 (props 변경, state 변경, 부모 컴포넌트 리렌더링)
2. getDerivedStateFromProps
3. shouldComponentUpdate
4. (true 반환 시 render 호출, false 반환 시 여기서 작업 취소)
5. render
6. getSnapsgotBeforeUpdate
7. (웹 브라우저상의 실제 DOM 변화)
8. componentDidUpdate

컴포넌트는 다양한 이유로 업데이트될 수 있습니다.

1. 부모 컴포넌트에서 넘겨주는 props가 바뀔 때
2. 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트될 때입니다.
3. 부모 컴포넌트가 리렌더링될 때입니다.
4. 자신에게 할당된 props가 바뀌지 않아도, 또는 자신이 들고 있는 state가 바뀌지 않아도, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 됩니다.

언마운트

: 마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 합니다.

• componentWillUnmount
  : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드입니다.