[React] Hook( useState & useEffect )

---

🅰 useState

---

1. 왜 사용할까?

• state를 사용하기 위해서 사용한다. 함수형 컴포넌트 안에서는 state를 사용할 수 없었다. 여기서 useState Hook을 이용하여 state를 사용할 수 있게 되었다.

---

2. 무엇을 호출할까?

• state 변수를 선언하고, 그 state를 호출할 때 사용한다. this.state가 제공하는 기능과 똑같다.

---

3. 인자로 무엇을 넘겨줄까?

• 인자로 넘겨주는 값은 state의 초기 값이다. 아래의 경우 초기 값으로 0을 넘겨주는 것이다.

useState(0);

---

4. 무엇을 반환할까?

• state 변수와 해당 변수를 갱신할 수 있는 함수 두 가지 쌍을 반환한다.
• 예를 들어, 아래와 같이 선언이 되었다고 했을 때, count라는 이름의 state는 0의 초기 값을 갖고, setCount에 의해서 갱신되는 것이다.

const [count, setCount] = useState(0); 

---

🅱 useEffect

1. 왜 사용할까?

• useEffect의 역할은 컴포넌트가 랜더링 된 후 어떤 일을 수행해야 하는지를 말한다. 리액트는 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러내게 된다. 무조건 DOM 업데이트 후에effect가 실행된다는 점을 알아두자.

---

2. 무슨 특징이 있을까?

• useEffect는 컴포넌트 내부에 둠으로써 effect를 통해 const state 또는 props 변수에 접근할 수 있게 된다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있다.
• useEffect는 렌더링 이후에 매번 수행하게 되는데, 매번 다른 함수(effect)가 실행된다.
• 함수(effect)에 정리(clean-up)가 필요한 경우에는 함수를 반환한다. clean-up은 마운트가 해제되는 때마다 실행된다.

---