[React] React Hook (useRef(), useEffect(), useState())

 

React를 공부하면서 Hook이나 State, Redux가 헷갈려서 정리하고자 간략하게 쓴다. 

공부한 코드 기반으로 정말 일부분만 후다닥 쓴 거라 아마 나만 알아볼 것 같다...!

 

1. React.useRef()

React Hook

 

리액트에서 돔요소를 가져올 때 쓸 수 있다. 

ex) input 에서 text를 가져오고 싶을 때 리액트 요소에서 가져올 수 있다. 

 const id_ref = React.useRef(null);

 

가져올 요소에 넣는다.

<input type="text" ref={id_ref} />

 

 

 

 

1. React.useState()

React Hook

 

아래를 예시로 들면, count에는 state값이, setCount에는 count이라는 state값을 수정하는 함수가 된다.

괄호 안은 상태의 초기 값을 나타낸다. 

 

setCount()라는 함수를 호출하여 state에 있는 count를 갱신시킨다. 

 

 

 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

 

 

Q. setter 생략가능하던데, 이렇게 사용도 하나? 

공부하다가 강의에서 굳이 상태변화 하는 부분이 없는데 useState를 써서 setName을 지웠봤더니 여전히 동작이 잘 됐다. 

궁금해서 찾아봤는데 나랑 너무 똑같은 생각을 한 분의 질문이 있었다. 

질문과 해답 > stackoverflow

 

setter 가 필요하지 않으면 useState를 사용하는 의미가 없으니 그냥 상수(3번형태)로 쓰라는 것 같다. 

1. const [name, setName] = React.useState("AlgoRoot");
2. const [name] = React.useState("AlgoRoot");
3. const name = "AlgoRoot";

 

 

 

3. React.useEffect()

React Hook 

class 생명주기 메서드(라이프 사이클 함수) 중 componentDidMount와 componentDidUpdate, componentWillUnmount를 합쳐둔 거라고 생각하자. 

 

useEffect()는 정리(clean-up)이 필요한 경우, 아닌 경우가 있다고 한다. 오늘 세 가지 Hook중에서는 이게 제일 헷갈린다. (정리가 필요하고 아닌경우는 지금 뒤죽박죽한 내 머릿속을 먼저 정리해야하기 때문에 다음에 다뤄봐야겠다 :()

일반적으로 addEventListener 와같은 이벤트를 발생시켰을 때 clean-up은 필수로 해줘야 한다. 

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

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

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

 

두 번째 인자 [] 부분은 dependency array로 리랜더링시(두번째 렌더링부터) 해당 부분이 바뀔 때 첫번째 인자인 콜백함수가 실행된다. 

(클래스형의 componentDidupdate와 비슷한 동작)

[] 의존형 배열을 비워두면  componentDidMount처럼 동작한다.

  React.useEffect(() => {
    // rendering 때 실행될 구문이 들어가는 부분
    // componentDidMount, componentDidUpdate일 때 동작하는 부분
    // do something ...

    return () => {
        // clean up 부분
        // componentWillUnmount 때 동작하는 부분
      //do something ...
    };
  }, []);

 

 

Q. Start.js  line 22

 

 

Reference : https://ko.reactjs.org/docs/hooks-intro.html