심심해서 해본 React + jQuery

React를 잘 사용하면 개발이 참 편할 줄 알았다. React는 알고 보면 아무것도 못한다. CDN을 이용하여 불러오는 방법으로 사용하지 않는 이상 webpack과 같이 사용하기 위한 방법으로 부수적인 것들이 너무 너무 너무 많이 필요하다.

그리고 가장 어려운 점. Dom을 선택하기 너무 어렵다.

Ref를 사용하면 되지 않느냐 하지만 Dom이 다 그려진 후 필요한 시점을 특정하여 조작하는 것은 쉽지가 않다. 특히 HTML, CSS, jQuery가 세상의 전부로 알고 있다 넘어온 퍼블리셔는 이 무슨 이상한 상황인가 생각할 수 밖에 없다.

이런 React의 단점을 극복하기 위해 React에 jQuery를 심어서 사용해 보았다.

// App.jsx
import React from 'react'

const App = () => {
	return <div>Hello World</div>
}

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

실행하면 Hello World만 나온다. 여기에 jQuery를 심어 보겠다.

// CORE.js
import React from 'react'
import $ from 'jquery'

React.$ = $

export default $

// App.jsx
import React from './CORE'

const App = () => {
	const { $ } = React

	return <div>Hello World</div>
}

우리의 나이 많은 친구 jQuery가 npm에 등록되어 설치를 할 수 있게 지원을 해준다. 심지어. type을 지원하여 Typescript에서 사용이 가능하게 개발을 해주었다.

다시 돌아와서 React라는 객체에 $를 추가했다. 좋은 방법은 아니라는 것을 알지만 작동은 한다. 하지만 결국 jQuery를 다시 불러와 Dom이 그려지는 시점을 찾아야 하는 것은 변함이 없다. 조금 더 개선을 해보았다.

// CORE.js
import React from 'react'
import $ from 'jquery'

React.$ = (Element) => {
  return (props) => {
    const [dom, setDom] = React.useState(null)

    React.useEffect(() => {
      setDom($(`.${Element().props.className}`))
    }, [Element])

    return <Element {...props} $={dom} />
  }
}

export default React

// App.jsx
import React from './CORE'

const App = (props) => {
  const fadeIn = () => props.$.fadeIn(1000)

  if (!!props && !!props.$) {
    props.$.addClass('foo bar').css({ color: 'red' })
    props.$.fadeOut(1000, fadeIn)
  }

  return <div className="app">Hello World</div>
}

export default React.$(App)

jQuery를 React에 커스텀 HOC로 만들었다.

마치며

이런 짓 하지 말자.