올해 설날에 udemy를 ​​사용하여 React Hooks에 대해 배웠으므로 메모를 출력합니다.

이번 신세를 낸 코스는 이쪽

React Hooks 입문 - Hooks와 Redux를 결합하여 최신 프런트 엔드 상태 관리 기술을 습득합시다!

아시는 분도 많다고 생각하지만 Udemy는 자주 세일을하고 있기 때문에 싸게 구입하는 것이 가능.
세일시에 구입하면 손을 움직이는 튜토리얼적인 존재로서는 염가라고 생각하므로 흥미가 있는 분에게는 추천하고 싶다.

UseState

useState는 값의 변경에 의해 자신의 재묘화를 스케줄링 시키는 기능.

import React, { useState } from "react";
const App = () => {
  const output = useState(1000);
  console.log({ output });

  return <div>This is a templete for react-app</div>;
};
export default App;

useSate는 항상 배열을 반환한다는 것을 알 수 있습니다.

import React, { useState } from "react";
const App = () => {
  const [count, setCount] = useState(0);

  return <div>This is a templete for react-app</div>;
};

export default App;

간단한 카운트 앱 구현

import React, { useState } from "react";
const App = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return (
    <>
      <div>count: {count}</div>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </>
  );
};
export default App;

setCount의 인수에 함수를 전달하는 패턴

import React, { useState } from "react";
const App = () => {
  const [count, setCount] = useState(0);

  const increment2 = () => setCount(previousCount => previousCount + 1);
  const decrement2 = () => setCount(previousCount => previousCount - 1);

  return (
    <>
      <div>count: {count}</div>
      <div>
        <button onClick={increment}>+1</button>
        <button onClick={decrement}>-1</button>
      </div>
    </>
  );
};
export default App;

previousCount는 현재 상태를받을 수 있습니다.
그러므로 c이든 p이든 무엇이든 좋다.

×2나 배수일 때만 3으로 나누는 것도 실장한 것

import React, { useState } from "react";
const App = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const increment2 = () => setCount(previousCount => previousCount + 1);
  const decrement2 = () => setCount(previousCount => previousCount - 1);

  const reset = () => setCount(0);
  const double = () => setCount(count * 2);
  const devide3 = () =>
    setCount(previousCount =>
      previousCount % 3 === 0 ? previousCount / 3 : previousCount
    );

  return (
    <>
      <div>count: {count}</div>
      <div>
        <button onClick={increment}>+1</button>
        <button onClick={decrement}>-1</button>
      </div>
      <div>
        <button onClick={increment2}>+1</button>
        <button onClick={decrement2}>-1</button>
      </div>
      <div>
        <button onClick={reset}>Reset</button>
        <button onClick={double}>×2</button>
        <button onClick={devide3}>3の倍数の時だけ3で割る</button>
      </div>
    </>
  );
};
export default App;

여러 상태를 관리합시다.

import React, { useState } from "react";
const App = () => {
  const initialStates = {
    name: "",
    price: 1000
  };
  const [name, setName] = useState(initialStates.name);
  const [price, setPrice] = useState(initialStates.price);
  return (
    <>
      <p>
        現在の{name}は、{price}円です。
      </p>
    </>
  );
};
export default App;

props를 가정한 쓰기

import React, { useState } from "react";
const App = props => {
  const [name, setName] = useState(props.name);
  const [price, setPrice] = useState(props.price);
  return (
    <>
      <p>
        現在の{name}は、{price}円です。
      </p>
    </>
  );
};
App.defaultProps = {
  name: "",
  price: 1000
};
export default App;

구현

import React, { useState } from "react";
const App = props => {
  const [name, setName] = useState(props.name);
  const [price, setPrice] = useState(props.price);
  return (
    <>
      <p>
        現在の{name}は、{price}円です。
      </p>
      <button onClick={() => setPrice(price + 1)}>+1</button>
      <button onClick={() => setPrice(price - 1)}>-1</button>
      <button onClick={() => setPrice(props.price)}>Reset</button>
      <input value={name} onChange={e => setName(e.target.value)} />
    </>
  );
};
App.defaultProps = {
  name: "",
  price: 1000
};
export default App;

리셋 구현

import React, { useState } from "react";
const App = props => {
  const [name, setName] = useState(props.name);
  const [price, setPrice] = useState(props.price);
  const reset = () => {
    setPrice(props.price);
    setName(props.name);
  };
  return (
    <>
      <p>
        現在の{name}は、{price}円です。
      </p>
      <button onClick={() => setPrice(price + 1)}>+1</button>
      <button onClick={() => setPrice(price - 1)}>-1</button>
      <button onClick={reset}>Reset</button>
      <input value={name} onChange={e => setName(e.target.value)} />
    </>
  );
};
App.defaultProps = {
  name: "",
  price: 1000
};
export default App;

여러 상태를 하나의 객체로 통합합시다.

state라는 객체로 모든 상태를 관리하고 리팩토링한 것

import React, { useState } from "react";
const App = props => {
  const [state, setState] = useState(props);
  const { name, price } = state;
  return (
    <>
      <p>
        現在の{name}は、{price}円です。
      </p>
      <button onClick={() => setState({ ...state, price: price + 1 })}>
        +1
      </button>
      <button onClick={() => setState({ ...state, price: price - 1 })}>
        -1
      </button>
      <button onClick={() => setState(props)}>Reset</button>
      <input
        value={name}
        onChange={e => setState({ ...state, name: e.target.value })}
      />
    </>
  );
};
App.defaultProps = {
  name: "",
  price: 1000
};
export default App;

UseEffect

UseEfefct란?

라이프사이클 메소드의 대체가 되는 것으로 componentDidMount 와 매우 비슷하다.

UseEffect는 언제 호출되는지

마지막 코드에 useEffect를 넣었다.

import React, { useEffect, useState } from "react";
const App = props => {
  const [state, setState] = useState(props);
  const { name, price } = state;
  useEffect(() => {
    console.log("useEfect is invoked");
  });
  const renderPreriod = () => {
    console.log("renderPreriod renders preiod.");
    return "。";
  };
  return (
    <>
      <p>
        現在の{name}は、{price}円です{renderPreriod()}
      </p>
      <button onClick={() => setState({ ...state, price: price + 1 })}>
        +1
      </button>
      <button onClick={() => setState({ ...state, price: price - 1 })}>
        -1
      </button>
      <button onClick={() => setState(props)}>Reset</button>
      <input
        value={name}
        onChange={e => setState({ ...state, name: e.target.value })}
      />
    </>
  );
};
App.defaultProps = {
  name: "",
  price: 1000
};
export default App;

이것을 실행하면 다음과 같은 로그가 출력됩니다.



DOM이 불릴 때, DOM이 최초로 draw 될 때, DOM안의 요소가 어딘가 변경되었을 때에 useEffect가 실행되었다.
즉 종래의 react의 componentDidMount나 componentDidUpdate와 닮았다고 하는 것이 이 로그로부터 알 수 있다.

componentDidmount처럼 첫 번째 렌더링 시간에만 실행하고 싶다면?

이것은 패턴으로 정해져 이와 같이 빈 배열을 건네준다.

useEffect(() => {
  console.log("This is like componentDidMopunt");
}, []);

그래서 예를 들면 다음과 같은 useEffect가 2개 있는 코드를 실행했을 경우는

useEffect(() => {
    console.log("This is like componentDidMopunt or componentDidUpdate.");
});

useEffect(() => {
    console.log("This is like componentDidMopunt");
}, []);

같은 여러 글을 쓰면



아래 배열을 통과한 useEffect는 한 번 한 실행되지 않는다.