React 기초 (7) - useState,useEffect

joker·2020년 5월 13일
0

React

목록 보기
7/7

참고 -> https://react.vlpt.us/basic , https://morioh.com/p/b0c9c138e967
React Hooks의 대표적인 2가지 useState, useEffect를 5분안에 배워보는 시간을 가지겠습니다.

useState

import React from "react";

function App() {
  const [number, setNumber] = React.useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

const [number, setNumber] = useState(0);

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해 줍니다.

  • 현재 기본값(0)
    이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재상태, 두번째 원소는 Setter 함수 입니다.
const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

풀어서 한다면 이렇게 되겠지만 '배열 비구조화 할당' 을 통해 위와 같이 간결해졌습니다.

const array = [1, 2];
const [one, two] = array;

console.log(one); //1
console.log(two); //2
  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해줍니다.
1번 onIncrease는 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주는 방식입니다.

2번 onDecrease는 기존 값을 어떻게 업데이트 할지에 대한 함수를 등록하는 방식입니다.

useEffect

이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대해서 알아보겠습니다.

import React from "react";
import randomcolor from "randomcolor";

function App() {
  const [number, setNumber] = React.useState(0);
  const [color, setColor] = React.useState("");

  const onIncrease = () => {
    setNumber(number + 1);
  };

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  React.useEffect(() => {
    setColor(randomcolor());
  }, [number]);

  return (
    <div>
      <h1 style={{ color: color }}>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;
  React.useEffect(() => {
    setColor(randomcolor());
  }, [number]);

첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열을 넣습니다.

+1버튼이나 -1버튼을 누를 때 마다 새로운 색상이 입혀지게 됩니다.

profile
개발자입니다.

0개의 댓글