JQuery 기존 소스 React로 마이그레이션하는데 생기는 이슈

이슈

1. 전역 변수와 라이프사이클

 

jQuery를 사용할 때 전역변수로 function을 선언해 놓고 편하게사용하는 프로젝트들이 많다.

예를 들어 아래와 같은 함수를 전역변수로 정의했다고 가정하면

$(function () {
	$("[data-select]").select();

	$("[data-popup]").on("click", function () {
		var $this = $(this),
			$parents,
			$x,
			$y;

		if ($this.data("popup") == ".member-select-wrapper") {
			$this.popup({
				type: "open",
				x: 0,
				y: 0,
				width: "100%",
			});
		} else {
			if ($this.parents(".box-item").length != 0) {
				$parents = $this.parents(".box-item");
				$x = $parents.offset().left + $parents.outerWidth() + 20;
				$y = $parents.offset().top;
			}
			$this.popup({
				type: "open",
				x: $x,
				y: $y,
				width: 400,
			});
		}
	});

	doubleCalendar();
});

data-popup 속성을 가진 Element에 event바인딩을 할 수 있다.

레거시의 전역변수 라이프 사이클은 html을 실행할 때 이루어지므로 선언해놓으면 쉽게 사용 가능하다.

 

하지만 react는 컴포넌트 관계를 tree 구조로 그려야 하고 setState할때마다 새롭게 렌더링이 되기 때문에

라이프사이클이 기존 동작방식과 달라진다. 내가 jquery이벤트 바인딩을 해서 어떤 Element를 속성값을 변경하는 등 수정을 했는데 setState를 하면서 해당되는 Dom이 다시 그려질 수 있다.

 

만약 자식 컴포넌트의 속성에 의해서 부모컴포넌트의 변경이 일어나는 경우 굉장히 번거로워진다.

그래서 개발을 하면서 기존 소스를 리액트로 어떻게 설계를 해야하는지 정리해 나갈 생각이다.

 

2. 돔에 html은 렌더링 되어 있는데 안보이는 경우 빨리 찾는 방법

 

  1) 개발자도구로 dom이 렌더링 되었는지 확인한다.

  2) class를 확인한다.

    - 보통 퍼블리셔가 있는 경우 내가 클래스내용까지 확인 잘 안하게 되는데

      class add 부분을 빼먹어서 안보이는 경우가 많다.

  3) css 속성을 확인한다.

 

3. 리액트에서 jQuery 이벤트 바인딩 function 적용

1의 jquery 함수처럼 특정 컴포넌트의 속성값 등을 활용해 jQuery를 적용시키려면, setState 콜백 함수에 jQuery를 세팅해야 할 것으로 보여진다. 그래서 나의 경우 컴포넌트에 state를 넣어서 구현했다.

<div 
  class={`popup-wrapper not-full ${this.state.type}`}
  style={this.state.type == 'open' ? style : {}}>
</div>

혼동했던 생각 정리

1. 팝업 구현

팝업의 경우 General로 만들어서 body태그 하위에 div를 추가해서 많이 썼었다.

그래서 팝업은 최상단 요소의 하위 div로 팝업을 넣어야 한다는 고정관념이 있었다.

 

그런데 body가 아닌 다른 요소에 하위로 들어가도 팝업같이 사용하는데 지장은 없을것 같다.

경로만 absolute로 적용된다면 팝업이랑 똑같다.

 

오히려 react는 부모컴포넌트에 직접 접근하는 방법이 까다롭기 때문에

이벤트 바인딩된 요소에 팝업을 만드는게 오히려 더 나을 수 있을 것 같다는 생각이 든다.