React

실행 흐름

1. Rendering Trigger
   👉 Component가 최초 실행될 때 Rendering을 지시한다.
   👉 상태 또는 속성이 변경되면 Rendering을 지시한다.
2. Components Rendering
   👉 Component가 정의된 Function이 (다시) 실행된다.
3. DOM Commit
   👉 ReactDOM의 JSX가 실제 DOM에 Mount된다.
   👉 Mount된 이후, Callback Function으로 인해 Side Effects가 발생한다.

---

최적화

• React.memo를 통해 props가 변경되지 않은 Component가 리렌더링되는 것을 방지한다.

---

Component

Atomic Component는 상태를 가지지 않는 것이 좋다.

---

상태 변수

React의 상태는 Snapshot 같아서,
Rendering Trigger로 인해 새로 리렌더링되지 않는 이상 상태 변수의 값은 절대 변경되지 않는다.
👉 useState Hook을 사용하여 상태 변수의 값을 변경시켜 리렌더링되도록 한다.

• 상태변수는 같은 상태변경함수이더라도 각 Component마다 독립적으로 동작한다.
  👉 같은 상태변수를 다른 Component와 공유하고 싶을 때에는 상위 요소에 상태변수를 전달한다.
• 상태변수는 상위 Component에서 접근/조작할 수 없다.

useState Hook 사용법

const [상태변수, 상태변경함수] = useState(초깃값);
/* 초깃값을 시작으로 상태변경함수가 실행될 때마다 상태변수가 리렌더링된다. */
/* useState Hook은 실행되면 상태변수와 상태변경함수를 요소로 가지는 배열이 반환되기 때문에,
   배열 구조 분해 할당을 이용하여 변수에 상태변수와 상태변경함수를 할당한다. */

상태변경함수(상태변수 + 1);  // 상태변경함수의 인수를 전달하여 상태변수의 값을 변경시킨다.

• 상태변경함수는 set~으로 시작한다.
• 상태변경함수의 인수로 업데이트 함수를 전달해서 한 번의 Rendering에 업데이트를 중첩시킬 수 있다.

---

Hook

use로 시작하는 내장된 함수

• Hook은 함수 내의 최상위 수준에서만 사용 가능하다.

---

Side Effect

• useEffect Hook 내부에 있는 코드는 DOM Commit 단계 이후에 실행된다.
  👉 어떤 코드를 작성하더라도 Rendering에 영향을 주지 않기 때문에 순수 함수를 유지할 수 있다.