React에서 Vanilla-Javascript 사용하고 싶으면 어떻게 할까?

📖들어가며..

제목 그대로 만약에 리액트에서 바닐라 자바스크립트 코드를 작성하고 실행하려면 어떻게 해야할까?

간단하게 생각하는 분들도 있을 것이고,

나처럼 "음... 어떻게 해야하지..?"라고 생각하는 분들도 있을 것이다.

 

저번 포스팅에서 리액트로 UI 컴포넌트를 만드는데 바닐라 자바스크립트를 만드는 방법에 대한 강의 자료도 있어서

이를 학습하다가 리액트에서 바로 바닐라 자바스크립트 코드를 작성하고 실행시키는 것이 신기해서

이번 포스팅을 기록하게 되었다.

 

만일 누가 나한테 "리액트에서 바닐라 자바스크립트만 사용해서 실행하는 법 알아?" 했을 때

나는 제대로 대답하지 못했을 것이다..ㅠ

 

아주 간단하고 쉬운 방법이지만 나처럼 모르는 사람들을 위해 기록하고 공유하고자 한다!

 

✨완성본

먼저 완성부터 보자!

완성본을 먼저 보게되면 과정이 어떻게 되는지 확실히 알 수 있으니까 먼저 보여주겠다!

// ...
 
 const pElem = document.createElement('p')
 pElem.textContent = '꺼짐'
  
 //...

실제로 위처럼 바닐라 자바스크립트 코드를 넣어서 실행하는 것이다.

사실 이 코드를 리액트 함수형 컴포넌트 내에 넣어 실행해도 무방할 것이다.

그렇지만 누가 코드를 본다면 어떤게 리액트로 작성한 것이고, 어떤게 바닐라 자바스크립트로 작성한 것인지 구분하기 힘들 것이다.

바닐라 자바스크립트 코드를 작성하고, 위 gif처럼 실행되게 할 것이다.

리액트 환경에서 바닐라 자바스크립트 코드도 함께 작성할 수 있는 환경을 만들었다!

 

 

🛠️설계

설계도를 그려봤다.

바닐라 자바스크립트 코드가 위 순서로 실행될 것이다.

그러면 위 처럼 VanillarWrapper 컴포넌트와 Initiator 함수가 필요하다.

VanillarWrapper 컴포넌트는 바닐라 자바스크립트 코드 결과를 출력해주는 컴포넌트이다.

단지 코드 결과를 출력해 줄 div Element를 생성하고 넘겨주는 역할을 한다.

 

Initiator 함수에서 바닐라 자바스크립트 코드 를 작성하고,

VanillaWrapper 컴포넌트에서 넘겨받은 div Element에 코드 결과를 append 해주는 것이다.

 

 

주절주절 써놨지만 정말 간단한 과정이다!

 

 

🛠️구현

그럼 이제 실제 구현한 코드를 보자

import { useEffect, useRef } from 'react'

const VanillaWrapper = ({
  title = '',
  subTitle = '',
  initiator
}: {
  title?: string
  subTitle?: string
  initiator: (wrapper: HTMLDivElement) => void
}) => {
  const wrapper = useRef<HTMLDivElement>(null)
  const isInit = useRef(false)

  useEffect(() => {
    if (!isInit.current && !!wrapper.current) {
      initiator(wrapper.current)
      isInit.current = true
    }
  },[initiator])

  return (
    <>
      {title && (
        <h3>
          {title}. Vanilla {subTitle && <sub>{subTitle}</sub>}
        </h3>
      )}
      <div ref={wrapper} />
    </>
  )
}

export default VanillaWrapper

정말 간단한 코드다.

위 설계에서 얘기한대로 바닐라 자바스크립트 코드의 결과를 출력할 divElement를 useRef를 통해 저장하고, 

useEffect로 렌더링 이후 ref 연결이 완료되면 initiator 콜백함수를 실행시킨다.

이때 연결한 div Element를 넘겨주는 것이다.

 

그럼 우리는 바닐라 자바스크립트 코드를 initiator 함수 내부에서 작성하고,

받아온 wrapper에 append만 해주면 된다.

 

그럼 실제 어떻게 사용하는지 보자

 

👨‍💻사용방법

import VanillaWrapper from '../../components/VaniilaWrapper'

const initiator = (wrapper: HTMLDivElement) => {
  let state = false
  const pElem = document.createElement('p')
  pElem.textContent = '꺼짐'

  const btnElem = document.createElement('button')
  btnElem.textContent = '버튼'
  btnElem.addEventListener('click', () => {
    state = !state
    pElem.textContent = state ? '켜짐' : '꺼짐'
  })

  const divElem = document.createElement('div')
  divElem.textContent = '테스트2 - 바닐라'
  divElem.append(btnElem, pElem)

  wrapper.insertAdjacentElement('beforeend', divElem)
}

const Accordion4_Vanilla = () => (
  <VanillaWrapper
    title={'바닐라 자바스크립트 아코디언'}
    subTitle={'개발새발'}
    initiator={initiator}
  />
)

export default Accordion4_Vanilla

initiator 함수 내부에는 위처럼 바닐라 자바스크립트 코드를 작성하면 된다.

 

참고로 아래코드를 보면

  wrapper.insertAdjacentElement('beforeend', divElem)

insertAdjacentElement 는 지정된 위치에 요소를 삽입하는 기능이다.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

하지만 아래 명령어를 사용해도 똑같은 결과가 나온다.

  wrapper.append(divElem)

 

이 두 메서드의 차이점은 현재 알고 있는 정보로는 "지정된 위치에 삽입할 수 있는 기능이 있는지 없는지" 밖에 없다.

그래서 추후 이 부분에 대해서 피드백을 받고 내용을 추가해보겠다!

 

 

📘마무리하며..

짧고 간단하게 포스팅이 끝났다!

사실 그냥 리액트 함수형 컴포넌트 내부에서 바닐라 자바스크립트 코드를 작성하고 해도 된다.

하지만 위처럼 깔끔한 코드를 만드는 것이 좋아보였고, 한편으로는 신기했다.

애초에 리액트에서 바닐라 자바스크립트 코드를 쓸 일이 없어서 이 부분에 대해서 알려고 하지 않았던 것이 있었다.

이번 기회에 이런 부분도 배우면서 한 번씩 바닐라 자바스크립트에도 관심을 가져보려고 한다.

왜냐하면 만약 누군가가 "무한 스크롤 기능을 바닐라 자바스크립트로 구현해보시겠어요?" 라고 하면 솔직히 막막하다.

리액트가 그만큼 편하기 때문이다..

 

아무튼 얼른얼른 다양한 UI 요소들을 만들면서 역량을 키워나가보자!!