🔮 Airbnb 숙소 페이지 클론 코딩: React Hook 사용기

문서 이것저것 참고하다가 동적으로 DOM노드의 스타일을 변경시킬 수 있는 방법으로 React Hook이라는 해답을 얻어서 Carousel을 구현할 수 있었다.

이전에 공식 문서는 봤지만 당장은 필요하지 않아서 지나쳤었는데 나한테 몹시 필요한 기술이였다..!

🤷‍♀️ React Hook ?

👆 React Hook공식문서 - Hook 개요 (https://ko.reactjs.org/docs/hooks-overview.html)

원래 함수형 컴포넌트는 상태변경 기능이 지원되지 않아서 정적 컴포넌트라고 불렸다고 한다.
그래서 함수형 컴포넌트로 작성하다가 상태를 사용해야할 경우,
클래스 컴포넌트로서 재작성을 해야했다고한다..
하지만, React 버전이 높아지면서 클래스 컴포넌트를 작성할 필요없이 state를 지정하는 것을 가능하게 해주는 React Hook이 등장하게 됐다. 👏👏👏

🧐 useState, useRef, useEffect 사용 방법

이 함수들은 모두 'react' 라이브러리에서 제공하니 import해서 사용할 수 있다.
각각의 용도를 간단히 살펴보자.

✔ useState - 컴포넌트의 상태를 저장하기 위한 함수로
사용시 state변수와 변경할 함수를 정의하고 인자로 state 초기값을 전달

아래의 예시처럼 사용할 수 있다.

const [slideNumber, setSlideNumber] = useState(0);

useState는 state 변수와 state를 변경하기위한 함수를 반환한다.

✔ useRef - 변경가능한 ref 객체를 반환하는 함수로 컴포넌트의 전 생명주기동안 유지됨. 부모 컴포넌트가 ref를 전달하여 자식 컴포넌트를 컨트롤 할 수 있게됨.
인자는 .current 프로퍼티에 전달된다.

아래의 예시는 Carousel 컴포넌트 내부 코드이다.

const slideRef = useRef(null);

...
	
useEffect(() => {
  slideRef.current.style.transform = 
    		`translateX(-${currentSlide}00%)`;
  }, [currentSlide]);

slide의 부모 컴포넌트에서 ref 객체를 생성하여 DOM노드로 직접 접근해서 스타일을 변경한다.

✔ useEffect - 리액트에게 리렌더링후 수행해야할 일을 알려주는 함수. state에 할 수 있기에 state에 따른 스타일 변경이 가능. 참고로, 인자로 함수를 전달하는데 이 함수를 effect라고 부름.
또한 optional하게 두 번째 인자를 전달할 수 있다.
이는 state의 변경을 추적하여 effect 실행여부를 판단하는데 의미가 있다.

그렇게 React hook을 사용해 비로소 동적 페이지를 구현할 수 있었다 ! 😙

carousel 코드 전체는 👉https://github.com/Hyeondoonge/Airbnb-Clone/blob/main/airbnb-app/src/components/Content/Carousel.js