React | React Hooks(basic)

React Hooks?

: functional component 에서도 상태 관리 를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. -> " functional programming 을 할 수 있다~!!"

// recompose + react team = react hooks

-class component 를 사용할 때,

Ex.js

import React, { Component } from "react";

export default class Ex extends Component {
  state = {
    count: 0
  };

  modify = n => {
    this.setState({ count: n });
  };
  render() {
    const { count } = this.state;
    return (  modeChange = () => {
    if (this.state.mode === "none") {
      this.setState({
        mode: "block"
      });
    } else if (this.state.mode === "block") {
      this.setState({
        mode: "none"
      });
    }
  };
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>Increment</button>
      </>
    );
  }
}

위와 같이 state가 필요, 정의, 값 넘기기.... 등등 많은 것을 필요로 한다.

Q1. 위의 코드를 react hooks를 사용하면 어떻게 달라질까?
Q1. 어떻게 class형 component에서 functional component로 바꿀까?
Q1. this는 어떻게 사용하지 않을 수 있을까?

밑의 코드를 통해 알아보자!

- functional component(.with hooks) 를 사용할 때,

Ex.js

import React, { Component, useState } from "react";

const Ex = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      {count}
      <button onClick={() => this.setCount(count + 1)}>Increment</button>
    </>
  );
};

export default Ex;

react hooks를 사용하면 일단 다음처럼 코드가 조금 더 가벼워진다.

-useState의 기본적인 사용법

useState를 코드의 상단에

import React, { useState } from "react";

를 통해서 useState를 불러오고! 다음과 같이 사용한다.

const [상태값,상태를 설정하는 함수] ="상태의 기본값"

useState는 리액트 state management 의 밑으로 들어가서 훅~을 당기는 것이다.

class형 component에서는 우리가 일일이 했지만 hooks를 사용하면 useState를 사용하여 작업할 수 있다.

-useState의 여러 번 사용하기

useState는 하나의 상태 값만 관리할 수 있다.
그럼 관리해야하는 상태가 여러개라면...? useState 를 여러번 사용하면 된다!

그 방법을 알아보자.

import React, { useState } from "react";
const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");
  const onChangeName = e => {
    setName(e.target.value);
  };
  const onChangeNickname = e => {
    setNickname(e.target.value);
  };
  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b>
          {name}
        </div>
        <div>
          <b>닉네임:</b>
          {nickname}
        </div>
      </div>
    </div>
  );
};
export default Info;

1. useState를 통해 class형의 state처럼name과 nickname를 정의하고 그 상태값을 할당한다.

2. 상태값을 설정하는 함수 (setName 과 setNickname)는 => class형 component의 "setState"와 같다고 생각할 수 있겠다.

3. state값 이라고 할 수 있는 "name" 과 "nickname"은 각각 필요한 곳에 { }중괄호 안에 넣어사용한다.

• class형 component에서 비구조화할당을 통해 this.state를 생략하고 사용했던 방법과 같다!
  • {name}이나 {nickname}이런 식으로 사용하면 된다.