Lyrics

<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/tCp0vukTNMo">https://youtu.be/tCp0vukTNMo</a> Sweet baby 사랑스러운 아가야 Like you, I emerged 나도 너처럼 어떤 불확실한 From a certain uncertain chaos 혼돈으로부터 태어났지 They say those who are quickest, survive 사람들은 말해, 가장 빠른 자가 살아남고 And those who are strongest, thrive 가장 강한 자가 번성한다고 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬 Sweet baby 사랑스러운 아가야 Never thought I’d be the one 내 스스로 내 패배를 To accept my own defеat 받아들일 줄 몰랐어 I know if I’d been quicker, I’d have survived 알아, 내가 더 빨랐다면 살아남았고 And if I’d been strongеr, I’d have thrived 더 강했다면 번성했겠지 But I never want to get all the things that I want 하지만 난 원하는 모든 걸 얻고 싶진 않아 How awful would that be for me? 그건 내게 얼마나 끔찍할까? I’m happier here, slow 나는 여기서 행복해, 느리게 And indulgent in the sun 태양아래 느긋하게 I’m happier here, weak 나는 여기서 행복해, 약하게 Let the night come when it comes 밤이 오면 그냥 오게 둬<hr> * Toolog 번역 시리즈는 Deepl, 파파고, Gemini, Mistral, Claude, Chatgpt, Perplexity, Pi, Hugging Chat, Hinative, Khoj 등의 번역기 및 플랫폼의 도움을 받습니다.(번역 자체가 부정확할 수 있습니다.)

https://youtu.be/tCp0vukTNMoSweet baby사랑스러운 아가야Like you, I emerged나도 너처럼 어떤 불확실한From a certain uncertain chaos혼돈으로부터 태어났지They say those who are quickest, survive사람들은 말해, 가장 빠른 자가 살아남고And those who are

Lightning Bug - On Paradise(가사 번역)

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</blockquote>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.<h2>watch API</h2>watch란 무엇일까? 공식문서를 확인해보자.<blockquote>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.</blockquote>아래와 같이 사용할 수 있다.<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>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.<blockquote><ul><li>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.</li><li><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.</li></ul></blockquote>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.그럼 문서에 나와있는 useWatch를 알아보자.<h2>useWatch API</h2>문서를 읽어보면 다음과 같이 설명하고 있다.<blockquote>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.</blockquote>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.<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>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍<h2>useWatch의 deep partial type 이슈</h2>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.이 문제는 <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>에서도 확인해보면 알 수 있다.결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.<h3>그럼 지금은 어떻게 대응해야할까?</h3>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.<pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.

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