하지만 리액트에서 이런 작업은 굳이 DOM에 접근하지 않아도 state로 구현할 수 있습니다. 잘 이해되지 않나요? 앞으로 작성할 예제 코드를 확인해 보면 감이 올 것입니다. 리액트 컴포넌트에서 state를 사용하여 제시한 기능을 한번 구현해 보겠습니다.

이 장에서는 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보겠습니다. 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 8장에서 Hooks를 배우면서 알아볼 것입니다.

이번 실습은 다음 흐름으로 진행합니다.

▲ 그림 5-2 리액트 컴포넌트에서 state 사용