[React/실전형 리액트 Hooks/노마드코더] #1 USESTATE (useInput)

 

강의출처

 

https://youtu.be/W6KX48dnH6I

 

 

 

 

---

 

useState

 

 

useState는 항상 2개의 값을 반환한다.

 

첫 번째 값은 현재 상태값,

두 번째 값은 상태값을 업데이트하는 함수를 작성한다.

 

그리고 useState는 초기상태를 설정할 수 있는 옵션을 제공한다.

 

 

아래와 같이 작성될 수 있다.

 

// 첫 번째 요소는 현재 상태값 item
// 두 번째 요소는 상태값 item을 업데이트하는 함수 setItem
// useState의 초기값으로 1 지정

const [item, setItem] = useState(1);

 

 

 

 

버튼을 누르면 값이 증가, 감소하는 코드를

useState를 사용한 코드와 사용하지 않은 코드 두 가지를 비교하여 살펴보자.

 

 

 

useState를 사용한 코드 (12줄)

 

//import { StrictMode } from "react";
//import { createRoot } from "react-dom/client";
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
//import App from "./App";

const App = () => {
  const [item, setItem] = useState(1);
  const incrementItem = () => setItem(item + 1); //item 값을 가져와 +1
  const decrementItem = () => setItem(item - 1); //item 값을 가져와 -1
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

 

useState를 사용하지 않은 코드 (30줄)

 

class AppUgly extends React.Component {
  state = {
    item: 1
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Hello {item}</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.incrementItem}>Increment</button>
        <button onClick={this.decrementItem}>Decrement</button>
      </div>
    );
  }
  incrementItem = () => {
    this.setState((state) => {
      return {
        item: state.item + 1
      };
    });
  };
  decrementItem = () => {
    this.setState((state) => {
      return {
        item: state.item - 1
      };
    });
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AppUgly />, rootElement);

 

 

코드 길이만 봐도 useState를 사용했을 때 코드가 얼마나 간결해지고 가독성이 좋아지는지 확인할 수 있다.

 

예제코드는 함수 하나이지만 어떠한 앱을 만든다고 가정했을 때

useState를 사용하지 않으면 얼마나 무거워질지 가늠이 되지 않는다.

 

 

 

 

 

실행결과

 

최초 로드되는 웹페이지

 

Increment 버튼을 누르자 숫자값이 증가하는 것을 확인할 수 있다.

 

decrement 버튼을 누르자 숫자값이 감소하는 것을 확인할 수 있다.

 

 

 

 

---

 

useInput

 

 

우리가 제일 처음 배울 hooks은 useInput이다.

useInput은 React Hooks 중 하나로, input 요소에서 발생하는 이벤트를 관리하기 위한 기능이다.

 

 

 

 

---

 

예제를 살펴보자.

 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: {value}
    } = event;
    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(value);  //value의 유효성 검사
    }
    if (willUpdate) {
      setValue(value);
    };
  };
  return {value, onChange};
}

const App = () => {
  const maxLen = value => value.length <= 10;
  const name = useInput("Mr. ", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name}></input>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

 유효성을 검사하는 함수 validator function을 만들어 특정문자 사용하지 못하도록 지정해 보았다.

 

 

name을 사용해서 useInput에 "Mr. "와 maxLen을 넣는다.

매번 validator의 결과는 바뀔 것이고

만약 validator의 타입이 function이라면, willUpdate에 validator의 결과를 업로드한다.

이 예제에서 validator은 maxLen이 되는 것이고,

그 결과는 value의 길이가 10보다 적으면 true, 아니면 false로 나올 것이다.

 

 

if문으로 돌아와 willUpdate가 true 라면

화면에 "Mr."를 업데이트한다.

 

 

---

 

 

위 코드 중 아래와 같이 표현된 코드를 확인할 수 있다.

 

<input placeholder="Name" {...name}></input>

 

위 표현은 스프레드 연산자로 value = {name.value}랑 {...name}이랑 같다.

아래 링크를 통해 스프레드 연산자에 대해 알아보자 !

 

 

https://record-study-steadily.tistory.com/28

ES6에 대해 알아보자 !

 

 

 

 

---

 

우리는 useInput을 만들어 위 예제에 적용시켜 보았다.

만든 useInput을 이용하여 다양하게 적용해 볼 수 있을 것 같다.

 

export const useInput = (initialValue, validator) => {
    const [value, setValue] = useState(initialValue);
    const onChange = (event) => {
      const {
        target: {value}
      } = event;
      let willUpdate = true;
      if (typeof validator === "function") {
        willUpdate = validator(value);
      }
      if (willUpdate) {
        setValue(value);
      };
    };
    return {value, onChange};
};

 

 

 

 

---

 

다음 포스팅에서 React hooks에 대해 더 알아보도록 하자 !