2020.07.09.

* 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다.

---

2020.07.09

 

오늘의 목표

• 리액트 훅 남은거 끝내기(노마드 코더 실전형 리액트 Hooks 강의 정독)
• 리액트 훅을 사용한 간단한 웹사이트 구현(카운터 앱)
• 학습시간과 쉬는시간을 나눠서 효율적으로 학습
• SNS(facebook, instagram), Youtube 사용 시간 줄이기.

동기

• class형 컴포넌트가 아닌 함수형 컴포넌트로 개발하고 싶어서
• 개발 시간 단축 및 효율성을 높이고싶기 때문에

---

useState, useEffect, useRef를 사용하지않고, custom hook을 만들어볼까요?

저희는 같이 개발자가 커스텀 할 수 있는 팝업창을 만들어볼까요?

완성되면 이러한 모습의 팝업창입니다!

자 그러면 이제 코드를 작성해볼까요~?

 

export const useConfirm = (message = "", onConfirm, onCancel) => {
    if (!onConfirm || typeof onConfirm !== "function") {
      return;
    }
    if(onCancel && typeof onCancel !== 'function'){
        return;
    }
    const confirmAction = () => {
      if (confirm(message)) {
        onConfirm();
      } else {
        onCancel();
      }
    };
    return confirmAction;
  };

이 코드에는 useState, useEffect, useRef가 없죠? 그래도 custorm hook으로 사용할 수 있다는 말씀!

 

코드를 분석해보자면...

useConfirm은 세 개의 인자를 받습니다.

• message : Are you sure?과 같이 팝업창에 보낼 메세지
• onConfirm : 확인을 눌렀을 때 작동하는 함수
• onCancle : 취소를 눌렀을 때 작동하는 함수

저 세 개의 인자의 역할을 알았으니 useConfirm함수를 이해하는 것은 쉬운 일이죠!

제일 처음 if문 두 개로 onConfirm과 onCancle이 함수인지 확인합니다. 만약 함수가 아니라면 return하여 함수를 끝내죠.

 

confirmAction에서 confirm함수를 사용하여 message를 confirm합니다.

그래서 만약 true이면 onConfirm을 실행하고, false라면 onCancle을 실행하죠.

 

정말 간단하게 나만의 custom hook을 함수형 프로그래밍으로 제작할 수 있다는 것이 정말 대단한 것 같습니다.

---

scroll을 컨트롤 할 수 있는 custom hook을 만들어볼까요?

import { useState, useEffect } from 'react';

export const useScroll = () => {
    const [state, setState] = useState({
      x: 0,
      y: 0
    });
    const onScroll = () => {
      setState({ y: window.scrollY, x: window.scrollX });
    };
    useEffect(() => {
      window.addEventListener("scroll", onScroll);
      return () => {
        window.removeEventListener("scroll", onScroll);
      };
    }, []);
    return state;
  };

코드를 같이 분석해 볼까요?

 

const [state, setState] = useState({ x : 0, y : 0 });으로 scroll할 때 x, y 좌표값을 저장할 state를 선언합니다.

onScoll함수에서 setState를 사용하여 y와 x값이 바뀔때마다 저장합니다.

useEffect에서 window.addEventListener('scroll', onScroll)을 사용하여 좌표값이 바뀔때마다 onScroll함수를 불러와 실시간으로 저장합니다.

return () => {window.removeEventListener("scroll", onScroll); };을 하여 이벤트 리스너를 삭제해줍니다.

 

이러면 정말 간단하게 state의 y값만 사용하여 스크롤을 제어할 수 있습니다! 정말 대단해요 정말 좋습니다 👍

 

+) class형 컴포넌트를 사용해서 코딩할 때 y값을 사용하려면 엄청 귀찮고, 긴 코드를 작성해야하는데 react hook을 사용하니 저렇게 쉽게 제어를 할 수 있네요... React Hook을 배울때마다 현타가 오는거 같습니다... 정말 좋은데 현타가 오는 이 느낌 여러분들도 느껴보셨으면 좋겠네요....ㅎ

---

2020.07.09. 회고

 

오늘의 목표를 이루었는가?

• 리액트 훅 남은거 끝내기(노마드 코더 실전형 리액트 Hooks 강의 정독)
• 학습시간과 쉬는시간을 나눠서 효율적으로 학습하기
• SNS(facebook, instagram), Youtube 사용 시간 줄이기.

세 개의 목표를 성공했지만, 간단한 웹사이드 구현은 하지 못했다.

 

목표를 이루지 못한 실패 요인

• 잠을 참지 못하고 세시간이나 자버렸다...

위 실패 요인을 해결하기 위한 방안

• 컨디션 조절은 필수
• 주말에 무리하지않고 휴식을 제공해주어야겠다

2020.07.09. 하루를 지낸 소감

어제 첫 날을 하고 나서 오늘도 할 수 있을까 걱정을 많이했다.. 그치만 목표를 설정해 놓으니 하기가 싫어도 해야하는 것이고 이 프로젝트의 목적이 나의 최선을 다 하는 것이기에 최선을 다해서 학습했다.

오늘 여러모로 안좋은 일들이 겹쳐서 스트레스 받아서 학습에 집중하지 못했지만, 그래도 나름대로 열심히 한 것 같아 뿌듯하다. 오늘 잠을 자지만 않았어도 심자를 와서 고생하는 일은 없을텐데... 다음부터 컨디션 조절을 잘해서 학습시간에 잠을 자는 일이 없도록 해야겠다고 생각했다.

내일은 금요일이다. 너무 들뜨지말고 내일도 꾸준하게 학습해야겠다. 제일 걱정되는 것은 주말인데 주말에는 휴식과 학습을 병행하면서 너무 한 쪽에만 몰리지 않도록 해야겠다.

블로그 글을 쓰면서 깃헙에 코드를 관리를 하니 더 효율적인 것 같다. 다른 사람들도 기회가 된다면 이렇게 해보았으면 좋겠다. 오늘도 모두들 수고 많았고, 내일의 나를 위해 충분한 휴식을 취해줍시다.

대한민국의 소프트웨어개발자분들 모두 힘내고 좋은 하루 보내세요~ 긴 글 읽어주셔서 감사합니다 😀

 

아래는 이 글을 쓰면서 도움을 받은 링크입니다.

저의 글보다 훨씬 더 좋은 영상과 자료들이 많으니 아래의 사이트도 한 번씩 들어가보시는 것을 추천드립니다!

 

리액트 Hooks 공식 문서 - https://ko.reactjs.org/docs/hooks-intro.html

노마드코더 실전형 리액트 Hooks - youtu.be/QhPFf-rhV3o

노마드코더 리액트 Hooks 10분만에 사용법 배우기 - https://www.youtube.com/watch?v=yS-BU6eYUDE

 

저의 깃헙 링크도 첨부하겠습니다. 공부하면서 작성한 코드가 있으니 들어오셔서 봐주시면 감사하겠습니다!

Bigstar1108 - https://github.com/Bigstar1108/Do_Your_Best