React Hooks Lifecycle - useEffect

2018년 리액트 컨퍼런스에 발표된 Hooks 는 기존의 class 방식의 무한 랩핑으로 인한 코드 복잡성을 줄일 수 있다고 발표하였습니다. 또한 클래스 방식의 몇몇 사이드 이펙트 메소드는 안전하지 않아 문제를 일으키기도 하였습니다. 대안으로 출시된 Hook은 더욱 편리하고 안전한 작업을 도와줍니다.

Hooks lifecycle

Hook종류와 Lifecycle

Mount - useMemo	종속값과 비교하여 차이가 있을 때만 렌더된다. useMemo로 전달된 함수는 렌더링 중에 실행됩니다. side effects는 useEffect에서 사용되며, useMemo에서 하는 일이 아닙니다. const cachedValue = useMemo(계산값, 종속값)
useState	새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다. (state와 동일한 인자는 렌더하지 않음) const [state, setState] = useState(초기값)
useReducer	(state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호 const [state, dispatch] = useReducer(reducer, initialArg, init)
useContext	하위 컴포넌트를 직접 사용할 수 있도록 만들어주는 Hooks 사용 컴포넌트가 전체적으로 렌더 되는 점 주의 const value = useContext(SomeContext)
useCallback	리-렌더 사이에 함수를 정의하는 Hook const cachedFn = useCallback(fn, dependencies)
Did Mount(Update) - useEffect	마운트, 언마운트, 업데이트가 완료 후 발생합니다. 두번째 인자를 통해 특정 props가 변경되었을 때만 실행되도록 설정이 가능합니다.

 

Side Effect 제어 useEffect 예시 (실행결과보기)

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

var funcStyle = 'color:blue'
var funcId = 0;
function FuncComp(props) {
  const [number, setNumber] = useState(props.initNumber)
  const [_date, setDate] = useState((new Date()).toString())
useEffect(function(){
  console.log('%cfunc => useEffect number (componentDidMount)'+(++funcId),funcStyle)
  document.title = number;
  return function(){ //clean up
    console.log('%cfunc => useEffect return (componentWillUnMount)'+(++funcId),funcStyle)
  }
}, []);//빈배열 2회만 실행
  //side Effect-렌더되는 효과, main Effect-화면이 출력되는 코드
  useEffect(function(){
    console.log('%cfunc => useEffect number (componentDidMount & componentDidUpdate) A'+(++funcId),funcStyle)
    document.title = number;
    return function(){ //clean up
      console.log('%cfunc => useEffect return (componentDidMount & componentDidUpdate)'+(++funcId),funcStyle)
    }
  }, [number])
  //복수 가능
  useEffect(function(){
    console.log('%cfunc => useEffect(componentDidMount & componentDidUpdate) B'+(++funcId),funcStyle)
    document.title = number + ":" + _date;
  })
  console.log('%cfunc => render '+(++funcId),funcStyle)
  return(
    <div className="container">
      <h2 style={{color:'blue'}}>Function style component</h2>
      <p>Number: {number}</p>
      <p>date: {_date}</p>
      <input type="button" value="random" onClick={
        function(){  
          setNumber(Math.random());
        }
      }/>
      <input type="button" value="date" onClick={
        function(){  
          setDate((new Date()).toString())
        }
      }/>
    </div>
  )
}
export default FuncComp

HOOKS EXAMPLE

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

import { useCallback } from 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

import { flushSync } from 'react-dom';

flushSync(() => {
  setSomething(123);
});

---

 

2018 react cof

 
 
Hooks Lifecycle 사진 - https://wavez.github.io/react-hooks-lifecycle/
React18 추가 메소드(flushSync) - https://kyounghwan01.github.io/blog/React/React18/flushsync/
flushSync  - https://ko.reactjs.org/docs/react-dom.html#flushsync
useEffect -https://ko.reactjs.org/docs/hooks-reference.html#useeffect