useState(), useEffect() 정의
리액트의 Component는 '클래스형'과 '함수형'으로 구성되어 있다.
기존의 클래스형 컴포넌트에서는 몇 가지 어려움이 존재한다.
이와 같은 어려움을 해결하기 위해, 'Hook'이 도입되었다. (16.8 버전부터)
기본적인 Hook으로 상태관리를 해야할 때 사용하면 된다.
상태를 변경할 때는, set
으로 준 이름의 함수를 호출한다.
const [posts, setPosts] = useState([]); // 비구조화 할당 문법
useState([]);
와 같이 ( )
안에 초기화를 설정해줄 수 있다. 현재 예제는 빈 배열을 만들어 둔 상황인 것이다.
컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
'클래스' 컴포넌트의 componentDidMount()와 componentDidUpdate()의 역할을 동시에 한다고 봐도 된다.
useEffect(() => {
console.log("렌더링 완료");
console.log(posts);
});
posts가 변경돼 리렌더링이 되면, useEffect가 실행된다.