2020.07.08.

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

---

2020.07.08

 

오늘의 목표

• 리액트 훅 배우기(노마드 코더 실전형 리액트 Hooks 강의 정독)
• 리액트 훅을 사용한 간단한 웹사이트 구현

동기

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

---

React Hooks?

• functional component에서 state를 가질 수 있게 해준다.
• 함수형 프로그래밍 스타일로 개발할 수 있다.

React Hooks를 사용한다는 것은 class component, componentDidMount, render 이런 것들을 안해도 된다는 뜻이다.

 

React Hooks의 간단한 예시를 살펴보자. 이 예시를 살펴보면 React Hooks를 사용하는 것이 왜 효율성이 좋은지 알 수 있을것이다.

 

Counter를 할 수 있는 간단한 웹을 구현해보자.

import React from 'react';

class App extends React.Component{
	state = {
    	count : 0,
    };
    
    modify = (type, n) => {
    	switch(type){
        	case 'increment':
            	this.setState({ count : n });
                return null;
            case 'decrement':
            	this.setState({	count : n });
                return null;
            default:
            	return null;
        };
    };
    
    render(){
    	const { count } = this.state;
    	return(
        	<>
            	<div>{count}</div>
                <button onClick = {() => this.modify('increment', count + 1)}>increment</button>
                <button onClick = {() => this.modify('decrement', count - 1)}>decrement</button>
            </>
        );
    }
}

export default App;

위의 방법이 class형 component로 counter를 구현했을 때 모습이다.

이제 React Hooks를 사용하여 counter를 구현한 모습을 살펴보자.

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  
  return(
    <>
      {count}
      <button onClick = {() => setCount(count + 1)}>Increment</button>
      <button onClick = {() => setCount(count - 1)}>Decrement</button>
    </>
  );
}

export default App;

코딩을 모르는 사람이 봐도 React Hooks를 사용하여 코드를 작성하는 것이 더 효율적이라는 것을 알겠죠!

 

const [count, setCount] = useState(0);

이 코드를 하나하나 알아가며 배워봅시다!

 

const [count, setCount]

useState는 2개의 요소를 포함한 array를 리턴합니다.

그 array의 첫번째 요소는 value이고, 두번째는 이를 변경하는 방법입니다.

 

useState(0);

array의 첫번째 요소인 value를 0에서 시작하게 만드는 것입니다.

class형 component에서 state = {count : 0}과 같은 코드인 것 같군요...

 

onClick = {() => setCount(count + 1)}

이 부분은 두 번째 요소인 value를 변경하는 방법을 작성한 것 입니다.

저는 value를 1증가하고 싶었기 때문에 setCount(count + 1)을 주었습니다.

 

이렇게 차근차근 알아보니 '리액트 훅을 사용안해도 되겠지?' 라는 생각을 가졌던 제가 너무 한심하군요...

이렇게 아름답게 코드를 짤 수 있다니... 놀랍고 빨리 코딩하고 싶은 마음이 듭니다...

 

지금까지 useState를 알아봤으니 이젠 useEffect를 같이 알아봅시다.

import React, { useState, useEffect } from 'react';

const App = () => {
	const sayHello = () => console.log("hello");
    const [number, setNumber] = useState(0);
    const [aNumber, setAnumber] = useState(0);
    useEffect(sayHello, []);
    return(
    	<div>
        	<button onClick = {() => setNumber(number + 1)}>{number}</button>
            <button onClick = {() => setAnumber(aNumber + 1)}>{aNumber}</button>
        </div>
    );
};

export default App;

React Hooks에서 useEffect는 class형 component의 componentDidMount, componentDidUpdate, componentWillUpdate의 역할을 합니다.

 

useEffect도 useState와 같이 두 개의 인자값을 제공합니다.

첫번째는 DidMount혹은 WillUpdate 시 작동되는 함수입니다. 두번째는 dependency를 받습니다.

 

여기서 useEffect의 재미있는 점, 유용한 점을 알았습니다.

왜냐하면 useEffect의 제공하는 인자값으로 DidMount, DidUpdate, WillUpdate를 컨트롤 할 수 있기 때문입니다.

 

only DidMount

useEffect(functionName, []) - dependency에 빈 array를 제공합니다.

 

위의 코드를 예시로 만약 number가 바뀔때마다 sayHello함수를 불러오고싶다면, 아래와 같은 코드를 작성하면 됩니다.

useEffect(sayHello, [number]);

 

그러면 number, aNumber 둘 다 바뀔때마다 sayHello함수를 작동시키고 싶다면 어떻게 해야할까요?

생각해보셨나요~?

정답은 어렵지 않습니다. 여러분이 예상하신 것처럼 useEffect(sayHello, [number, aNumber]); 이 코드 입니다.

 

그러면 componentWillUnMount를 호출하기 위해서는 어떠한 코드를 작성해야할까요?

import React, { useState, useEffect, useRef } from "react";

const useClick = onClick => {
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};

const App = () => {
  const sayHello = () => console.log("say hello!");
  const title = useClick(sayHello);
  return (
    <div>
      <h1 ref={title}>dd</h1>
    </div>
  );
};

export default App;

위와 같은 코드에서 useClick 부부을 확인해주세요!

useEffect에서 첫번째 인자인 함수가 들어갔습니다. 위에서 읽으셨으니 저 함수의 역활은 아시겠죠?

네~ addEventListener는 componentDidMount일 때 실행하는 함수입니다.

하지만 이벤트리스너를 추가했으면 현재의 페이지가 끝날 때 이벤트리스너를 지워주어야겠죠.

이 때 사용하는 것이 componentWillUnMount이고 react hooks에서는 return () => {함수내용}과 같이 작성합니다.

위의 코드를 보시면 return () => {}안에 removeEventListener가 있죠... 이해하셨을거라 믿습니다..!

 

차근차근 알아가니 React Hooks는 정말 간단하고 유용하며 획기적인 것 같습니다.

---

2020.07.08. 회고

 

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

• 리액트 훅 배우기(노마드 코더 실전형 리액트 Hooks 강의 정독)
• 리액트 훅을 사용한 간단한 웹사이트 구현

위 두 목표 중 첫 번째는 반 정도 진행하였고, 두 번째는 시도조차 하지 못했다.

• 정확한 수치는 노마드코더 실전형 리액트 Hooks 재생목록 10번까지 보았다.

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

• 스마트폰 사용(페이스북, 인스타, 유튜브)
• 유튜브 시청(랩탑을 사용한 유튜브 시청)
• 컨디션 조절 실패로 인한 피로감

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

• 스마트폰 페이스북, 인스타 앱 삭제 (but, 처음부터 모든 걸 금지하는 건 과유불급이기 때문에 유튜브는 남긴다)
• 컨디션 조절은 나의 재량에 맞겨서 조절해야 할 듯 하다

2020.07.08. 하루를 지낸 소감

처음에는 이걸 내가 할 수 있을까 하고 두렵기만 했다. 그렇지만 차근차근 하나하나 기록하면서 학습하니 학습 효과가 2배가 되는 것 같다...(오버인가..) 설래발일 수도 있지만 웹을 학습하고 싶은 초보 개발자가 이 글을 보고 도움이 된다고 생각하면 정말 기분이 좋을 것 같다.. 그러니까 이 글을 혹시나 읽으시면서 궁금한 점이나 틀린 점이 있으면 무조건 댓글을 남겨주세요! 우리 서로 지식을 공유하면서 서로 발전해 나갑시다.!

정말 솔직히 말하면 이게 얼마나 오래갈지 내일, 모래 하긴 하더라고 오늘같은 양을 할 수 있을지 걱정된다. 그래도 안하는 것 보다는 하는게 낫다라는 생각을 가지고 양이 얼마나 되든 내일도 글을 올릴 것이다.

말도 존댓말, 반말 왔다리 갔다리 하면서 엄청 글 내용이 전문적이지도 않고, 야매같기도 하고 그렇지만 그래도 정말 좋은 마음에 공유하고 싶어서 작성한 글이니까 좋게 봐주셨으면 좋겠습니다! 

대한민국의 모든 개발자들 모두 힘내고, 내일도 좋은 하루 보냅시다. 긴 글 읽어주셔서 감사합니다 :D

 

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

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

 

리액트 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