React Hook

useState(), useEffect() 정의

리액트의 Component는 '클래스형'과 '함수형'으로 구성되어 있다.

기존의 클래스형 컴포넌트에서는 몇 가지 어려움이 존재한다.

1. 상태(State) 로직 재사용 어려움
2. 코드가 복잡해짐
3. 관련 없는 로직들이 함께 섞여 있어 이해가 힘듬

이와 같은 어려움을 해결하기 위해, 'Hook'이 도입되었다. (16.8 버전부터)

Hook

• 함수형 컴포넌트에서 State와 Lifecycle 기능을 연동해주는 함수
• '클래스형'에서는 동작하지 않으며, '함수형'에서만 사용 가능

useState

기본적인 Hook으로 상태관리를 해야할 때 사용하면 된다.

상태를 변경할 때는, set으로 준 이름의 함수를 호출한다.

const [posts, setPosts] = useState([]); // 비구조화 할당 문법

useState([]);와 같이 ( ) 안에 초기화를 설정해줄 수 있다. 현재 예제는 빈 배열을 만들어 둔 상황인 것이다.

useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

'클래스' 컴포넌트의 componentDidMount()와 componentDidUpdate()의 역할을 동시에 한다고 봐도 된다.

useEffect(() => {
    console.log("렌더링 완료");
    console.log(posts);
});

posts가 변경돼 리렌더링이 되면, useEffect가 실행된다.

[참고자료]

• 링크 (opens new window)