Arrow function binding

Refri Bank 유지 보수 라는 주제로 다시 4명이 모였다.
모바일도 호환이 되도록 (반응형으로도) 만들어보자 🔥

여러가지 방법이 있지만,, 먼저 미디어 쿼리를 써보기로 했다!

반응형 웹 설계 - 미디어 쿼리(Media Queries)
미디어 쿼리는 CSS3에서 소개된 CSS 기술입니다. 미디어 쿼리는 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용합니다.
아래 코드는 브라우저 창의 width가 600px 이하인 경우, body의 배경색을 lightblue로 적용하겠다는 의미를 갖습니다.

높이와 폭이 다른 수 많은 스크린과 기기가 있어 각 장치에 대해 정확한 브레이크 포인트 (어디서부터 어디까지는 뭐로하자! 와 같은 기준) 를 만들기는 어렵다. W3Schools.com에서는 이를 단순하게 하기 위해 5개의 그룹으로 나누어 제시한다.

오늘은 600px 을 기준으로 웹과 모바일만을 구분하였다..
다음에 만날 땐 태블릿도 하자 👏

유지 보수를 하면서 여러가지 의문점들이 쏟아져 나왔는데, 집에 가기 직전까지도 해결을 못한 찝찝한? 부분이 있어 다시 공부를 했다!!!! 억울해서라도 완벽하게 이해하고 가야한다.

문제의 코드는 다음과 같다.

header.js 안의 코드이고 모바일 버전에서 왼쪽 사이드 바 안에 Page 부분을 토글로 구현하는 코드이다.

위의 코드에서 onclick 부분을 아래와 같이 바꾸면 render 가 너무 많이 일어나, 알아서 멈췄다는 에러와 함께 돌아가질 않는다. 방법은 의외로 간단했다. arrow function !!!

onClick = {setpagetoggle(!pagetoggle)} 

정말 기묘하다. 람다 함수로는 잘 되는데 왜 일반 함수로는 안되나... 몇시간동안 머리를 굴려도 답이 나오질 않아 구글을 뒤져봤고, 답을 찾았다! 늘 그랬듯 정답을 찾을 것이다.

<예제> .... [출처] - React에서 이벤트 적용 하기 , Su Bak

App 컴포넌트에 button이 있는데 이 button을 클릭했을 때 alert이 뜨도록 하고 싶다면 어떻게 할 수 있을까? (리액트에서)

<button onClick={alert("hi")}>Click Me!</button>

다음과 같을것이다. 너무나 자명하지 않은가 하지만?
위와 같이 클릭 이벤트를 적용하면 클릭할 때 alert가 실행되는 것이 아니라 컴포넌트가 그려질 때 (처음 렌더링 될 때) alert가 실행되고 클릭했을 땐 아무런 현상도 일어나지 않는다. 도대체 왜 그럴까 !!!!

위와 같이 onClick에 alert(‘Click!’) 함수 호출을 바로 하는 경우 컴포넌트가 render할 때 함수 호출의 결과가 onClick에 바인딩 되기 때문에 클릭할 때가 아닌 컴포넌트가 render될 때 alert가 실행되고 그 결과인 undefined(함수는 return 값이 없을 때 undefined를 반환한다)가 onClick에 바인딩 되기 때문에 클릭 했을 때 아무런 결과도 일어나지 않는 것이다. 쉽게 이해를 하면, 버튼을 클릭 했을 때 (onClick event) 함수가 실행이 되어야 하는데 처음에 코드를 싹 돌면서 렌더링이 될 때, 그 때 함수가 실행이 되어버리고, 그 결과가 onClick에 바인딩이 된다는 것이다.

이 문제를 해결하는 방법은 onClick에 함수 호출(실행)이 아닌 함수를 정의(선언)하는 것이다. (가능한 arrow function을 사용하는 것을 권장한다. 함수 선언식의 경우 함수 본문에서 this를 사용할 때 문제가 될 수 있다.)

또 다른 예제를 이용해 설명을 잘 해놓은 글이 있다. 참고하면 좋다!

Arrow function binding

React는 이벤트가 발생했을 때 표현식에 정의되어 있는 함수를 자동으로 호출하기 때문에 함수 호출을 이벤트에 적용하면 함수 호출의 결과가 이벤트에 적용되는 것이다. 그러므로 함수 호출이 아닌 함수 자체를 적용해야 한다.

React의 경우 사용자가 정의한 컴포넌트에 onClick과 같은 이벤트를 넣으면 props로 전달이 된다. 이벤트를 적용할려면 div와 같은 native에만 적용이 가능함을 주의!

모바일도 호환되게 하자고,, 그렇게 시작 했는데 결국 마지막은 새벽 2시에 arrow function 이라니 정말 재밌다. 이럴 때 쓰는 말이 하나 떠오른다.

시작은 미비했으나 결과는 창대하다.