<div id="readability-page-1" class="page"><div>
 <div id="SE-9e8b72f5-f920-44bb-b473-b35b42b94b07">
 <blockquote>
 도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :)
 </blockquote>
 </div>
 <div id="SE-45696864-460f-4b2c-aee5-07e1c42df353">
 ​개요​최근 react.js 를 다시 공부하고 있다. React.js 는 함수형 스타일로 작성을 하다보니 OOP 처럼 관심사를 클래스 단위로 나누는 대신 custom hook 을 사용해 UI 와 순수 로직을 분리하는 방식을 사용하는듯 하다. 따라서, custom hook 작성 방식에 대한 이해가 필요한데, 책이나 유튜브에서 아무리 강조를 해도 결국 본인이 여러 예제로 연습을 해보는게 중요한것 같다. 하지만, 막상 혼자 연습을 하려고 하면 (특히 초보자분들에게는) 어디서부터 시작해야할지 막막하다. 이런 분들에게 큰 도움이 될 무료 강좌를 추천하기 위해 이 포스팅을 쓴다.​​​실전형 리액트 (by. 노마드코더)​(협찬 같은거 받고 쓰는 글 아니다..) Youtube, Udemy, 책 등 여러 자료를 통해 React.js 를 여러차례 공부하려고 시도했는데 개인적으로는 노마드코더 강좌가 가장 도움이 많이 된듯하다. 노마드코더가 제공하는 많은 리액트 강좌가 있지만 여기서 추천하려는건 &lt;실전형 리액트 Hooks 10개 - 노마드코더&gt; 라는 무료 강좌다.​
 </div> <div id="SE-78f26d93-2e27-4ec1-9a5b-a87ba44a1ae6">
 ​해당 강좌는 무료임에도 custom hook 에 대해 상당히 깊이있게 다루고 있다. 총 10개의 custom-hook 을 만들면서 UI component 로부터 순수 로직을 떼어내는 연습을 할수있다. ​그냥 한번 쭉 듣기만 해도 어느정도 도움이 되지만, 어떤 내용의 hook 을 만드는지 설명을 듣고 강좌를 보기 전에 직접 구현해보면 정말 큰 도움이 된다.​​
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 최근 react.js 를 다시 공부하고 있다. React.js 는 함수형 스타일로 작성을 하다보니 OOP 처럼 관심사를 클래스 단위로 나누는 대신 custom hook 을 사용해 UI 와 순수 로직을 분리하는 방식을 사용하는듯 하다. 따라서, custom hook 작성 방식에 대한 이해가 필요한데, 책이나 유튜브에서 아무리 강조를 해도 결국 본인이 여러 예제로 연습을 해보는게 중요한것 같다. 하지만, 막상 혼자 연습을 하려고 하면 (특히 초보자분들에게는) 어디서부터 시작해야할지 막막하다. 이런 분들에게 큰 도움이 될 무료 강좌를 추천하기 위해 이 포스팅을 쓴다. 실전형 리액트 (by........

[React.js] custom hook 연습

댓글