이제까지 강의로 배우면서 나 혼자만 생각했던 두리뭉실한 리액트의 개념들을
제대로 확립하기 위해 공식문서를 보고 정리하기로 마음먹었다. 너무 늦은거아냐?
아직도 완벽히 쓰지 못하고 있는듯하지만 가장 기본적이고 가장 많이쓰는 hook 순서대로 알아볼까한다.
아니 그전에 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되고,
useState 가 여러 번 호출되는 중에도 Hook의 상태를 바르게 유지하기 위해
Hook의 규칙을 먼저 알아보자!
- 최상위(at the Top Level)에서만 Hook을 호출해야 함!
- 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안됨!
- 오직 React 함수 내에서 Hook을 호출해야 함!
import React, { useState } from 'react';
function Example() {
// "count"라는 새로운 상태 값을 정의합니다.
const [count, setCount] = useState(0);
// componentDidMount, componentDidUpdate와 비슷합니다
useEffect(() => {
// 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}리액트 공식문서에 있는 코드를 참조하였음!
클래스형 컴포넌트의 멤버변수들은 딱 그 클래스가 만들어질 때, 딱 한번만 할당 된다.
그리고, state나 props가 변경이 되면 변수들은 가만히 있고 render 함수만 계속해서 반복 호출이 되는 반면에,
함수형 컴포넌트는 props나 state가 변경되면 지역변수들까지 전체가 반복 호출 된다.
그래서 onClick에 전달한 콜백함수는 첫 번째 불려졌을 때, 새로운 함수가 만들어지고
그 다음에 state가 변경이 되어서 다시 함수가 호출되면 또 다른 값들을 업데이트 해준다
그러나, React hook들은 다르다.
예를 들어, useState 아무리 계속 호출해도 리액트에서 따로 저장되어 있어서 동일한 값을 메모리에 저장해놓기 때문에
동일한 값들을 불러온다.
const [count, setCount] = useState(0);실제의 state값과 count를 업데이트 할 수 있는 setCount를 return 해줌.
(count) = usestate라는 함수, API를 통해서 state를 설정하고,
(setCount) = state를 업데이트할 수 있는 함수를 받아 올 수 있다.
useState()Hook의 인자로 넘겨주는 값은 state의 초기 값이며, 숫자 타입과 문자 타입 가능!
2개의 다른 변수를 저장하기를 원한다면 useState()를 두번 호출해야 함.
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);하나의 컴포넌트 내에서 State Hook을 여러 개 사용 가능!
useEffect도 보려했는데, 생각보다 양이 방대하다..
다음시간에!
