Webview

<img src="https://image.until.blog/morethanmin/article/1717424912994" alt="until-401"><p>디자인 시스템을 구현하면서 <code spellcheck="false">:hover</code> 가상 클래스를 적용했던 경험을 기록한다.</p><p><code spellcheck="false">:hover</code>는 포인터가 해당 엘리먼트 위에 올라가 있는 상태를 나타내는 가상 클래스로 주로 버튼이나 인풋과 같은 컴포넌트를 구현할 때 사용한다.</p><p>이러한 <code spellcheck="false">:hover</code> 가상 클래스는 마우스를 올려둔다와 같은 경우가 없는 환경에서는 어떻게 동작할까? 대표적으로 터치로 동작하는 모바일 디바이스가 있을 텐데, 어떻게 동작하는지 알아보자.</p><h1><strong>터치 디바이스에서의 :hover</strong></h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/CSS/:hover">:hover</a> 페이지의 예제를 브라우저에서 실행시켜보면 쉽게 알 수 있다.</p><pre spellcheck="false"><code class="language-css">a:hover {
  background-color: gold;
}
</code></pre><p>PC 브라우저에서는 잘 동작하지만, 모바일 브라우저에서는 마우스 포인터가 없으니 <code spellcheck="false">:hover</code> 클래스가 동작하지 않을 것처럼 보이지만, 클릭 이벤트가 발생할 경우 <code spellcheck="false">:hover</code>에 선언한 배경 색상이 변경된 채로 남아있는다. 그리고 다른 영역을 클릭하면 효과가 해제된다는 것을 알 수 있다.</p><p>그렇다면 마우스 환경과 동일하게 <code spellcheck="false">touchOver</code> 시에만 스타일이 적용되게 하려면 어떻게 해야할까?</p><h1><strong>터치 디바이스에서 동일하게 스타일 적용하기</strong></h1><h2>@media hover</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover">@media hover</a>를 이용하면, hover를 지원하는 환경인 경우에만 해당 스타일이 적용되도록 할 수 있다.</p><p>예시는 아래와 같다.</p><pre spellcheck="false"><code class="language-css">a:hover { /* default hover effect */
  color: black;
  background: yellow;
}

@media (hover: hover) { /* when supported */
  a:hover {
    color: white;
    background: black;
  }
}
</code></pre><p>하지만 이방법을 사용하더라도 <strong>일부 Android </strong>에서는 길게 누를 때 호버링을 에뮬레이트하는 기능이 있어 hover를 지원하는 것으로 판단하는 경우가 있다.</p><p>이러한 경우에도 동일한 경험을 제공하기 위해서는 @media pointer를 사용하면된다.</p><h2><strong>@media pointer</strong></h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer">@media pointer</a>는 장치에 포인터의 존재 여부와 포인팅 장치의 정확도를 확인한다.</p><p>mdn에서는 아래와 같이 설명하고 있다. 우리의 경우에는 fine 을 사용하면 된다.</p><blockquote><p><code spellcheck="false">none</code></p><p>The primary input mechanism does not include a pointing device.</p><p><code spellcheck="false">coarse</code></p><p>The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.</p><p><code spellcheck="false">fine</code></p><p>The primary input mechanism includes an accurate pointing device, such as a mouse.</p></blockquote><p>결과적으로 아래와 같이 적용하면 된다.</p><pre spellcheck="false"><code>@media (hover: hover) and (pointer: fine) { /* when supported */
  a:hover {
    color: white;
    background: black;
  }
}
</code></pre><p>호버를 지원하고, 포인터를 지원하는 디바이스인 경우에만 호버 스타일을 적용할 수 있게 되었다.</p><h1>결론</h1><p>결론적으로 위 방법을 사용하면 포인터를 사용하는 디바이스에서만 호버스타일을 적용할 수 있게되었지만, 위 방법이 무조건적으로 적합한 방식인지는 생각해볼 필요가 있다.</p><p>결국 터치디바이스에서 hover스타일을 적용시키고 있는 것이 지금의 웹 표준 동작에 가깝다고 할 수 있는 것이기 때문이다.</p>

디자인 시스템을 구현하면서 :hover 가상 클래스를 적용했던 경험을 기록한다.:hover는 포인터가 해당 엘리먼트 위에 올라가 있는 상태를 나타내는 가상 클래스로 주로 버튼이나 인풋과 같은 컴포넌트를 구현할 때 사용한다.이러한 :hover 가상 클래스는 마우스를 올려둔다와 같은 경우가 없는 환경에서는 어떻게 동작할까? 대표적으로 터치로 동작하는 모바일 디

터치 디바이스에서 hover 스타일 제어하기

React

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote><p>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</p></blockquote><p>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)</p><p>react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.</p><h2>watch API</h2><p>watch란 무엇일까? 공식문서를 확인해보자.</p><blockquote><p>This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.</p></blockquote><p>아래와 같이 사용할 수 있다.</p><pre spellcheck="false"><code class="language-typescript">// ...
const Summary: FC = () =&gt; {
  const { watch } = useFormContext&lt;Values&gt;();

  const value = watch();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};

export default Summary;
</code></pre><p>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.</p><blockquote><ul><li><p>This API will trigger re-render at the root of your app or form, consider using a callback or the <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-hook-form.com/docs/usewatch">useWatch</a> api if you are experiencing performance issues.</p></li><li><p><code spellcheck="false">watch</code> result is optimised for render phase instead of <code spellcheck="false">useEffect</code>'s deps, to detect value update you may want to use an external custom hook for value comparison.</p></li></ul></blockquote><p>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.</p><p>그럼 문서에 나와있는 useWatch를 알아보자.</p><h2>useWatch API</h2><p>문서를 읽어보면 다음과 같이 설명하고 있다.</p><blockquote><p>Behaves similarly to the <code spellcheck="false">watch</code> API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application.</p></blockquote><p>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.</p><pre spellcheck="false"><code class="language-typescript">// ...

const Summary: FC = () =&gt; {
  const values = useWatch&lt;Values&gt;();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};
export default Summary; 

// ...</code></pre><p>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍</p><h2>useWatch의 deep partial type 이슈</h2><p>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.</p><p>이 문제는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/orgs/react-hook-form/discussions/10610">해당 논의</a>와 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/react-hook-form/react-hook-form/issues/9954">이슈</a>에서도 확인해보면 알 수 있다.</p><p>결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.</p><h3>그럼 지금은 어떻게 대응해야할까?</h3><p>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.</p><pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><p><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.</p><p></p><p></p><p></p>

이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 