실전형 리액트 Hooks 10개 (1) - useState

 

https://nomadcoders.co/react-hooks-introduction

실전형 리액트 Hooks 10개 - 노마드 코더 Nomad Coders

노마드 코더의 실전형 리액트 Hooks 10개 강의를 참고하여 적습니당

 

리액트 + 노드로 앱을 만드는데, 프론트엔드(리액트)에서 막히는 부분이 많아 리액트에 대한 이해도를 높이기 위해 강의를 빠르게 듣고 그 내용을 정리해본다.

 

• useState
• useInput
• useTabs
• useEffect
• useTitle
• useClick
• useConfirm & usePreventLeave
• useBeforeLeave
• useFadeIn & useFullscreen
• useNotification
• useAxios

---

리액트 훅이란, useState

 

React Hooks: 함수 컴포넌트가 state을 가질 수 있도록 해준다.

class 컴포넌트, componentDidMount, render을 할 필요가 없으며, 함수형 프로그래밍 스타일이 된다.

(+ this도 사용하지 않음)

 

예시를 들어보자. 아래는 버튼을 누르면 숫자가 증가하는 코드이다.

import React, { Component } from "react";

class App extends Component {
  state = {
    count: 0
  };

  modify = n => {
    this.setState({
      count: n
    })
  };

  render(){
    const {count} = this.state;
    return (
      <div>
        <div>{count}</div>
        <button onClick={()=>this.modify(count+1)}>Increment</button>        
      </div>
    );
  }
}

export default App;

 

우리는 코드를 작성하며 class 컴포넌트가 필요하고, state도 필요하고, 그것을 정의하고 전달해줘야 한다.

리액트 훅을 사용한다면 우리가 class 컴포넌트에서 일일이 했던 것을 간단하게 할 수 있다.

 

아래는 위의 코드에서 훅을 사용한 버전이다.

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

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

export default App;

 

useState은 value와 그것을 변경하는 방법 이 2가지를 배열로 준다. ( useState은 배열을 리턴한다. )

만약 value 또는 함수에만 접근하고 싶다면 아래와 같이 index를 사용하면 된다.

const [count] = useState(0)[0];
const [setCount] = useState(0)[1];

 

 

useInput

 

useInput은 input을 업데이트하는 훅이다.

 

import React, { useState } from "react";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  return {value};
}


const App = () => {
  const name = useInput("leeeeeyeon");
  return (
    <div>
      <input placeholder="name" value={name.value} />
    </div>
  );
}

export default App;

useInput은 초기값을 받고 > 그 값을 value에 대입한 뒤 > value를 리턴한다.

우리는 name이라는 변수에 useInput을 이용하여 value를 전달해주었고 > input 태그에서 value로 name.value를 주어 > 초기값인 leeeeeyeon이 입력된 채로 보인다.

( + name.value랑 ...name이라고 적는 것 둘 다 똑같이 동작함, ES6 문법 )

 

import React, { useState } from "react";

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
    console.log(event.target);
  };

  return {value, onChange};
}


const App = () => {
  const name = useInput("leeeeeyeon");
  return (
    <div>
      <input placeholder="name" {...name} />
    </div>
  );
}

export default App;

 

이번에는 useInput 안에 onChange 함수를 만들었다. 입력 창에 아무것이나 타이핑을 하면,

event가 콘솔에 출력되는 것을 볼 수 있다.

 

이번에는 useInput을 확장시켜 유효성을 검증하는 기능을 포함시켜보자.

import React, { useState } from "react";

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};
}


const App = () => {
  const maxLen = (value) => value.length < 10;
  const name = useInput("I am", maxLen);
  return (
    <div>
      <input placeholder="name" {...name} />
    </div>
  );
}

export default App;

• willUpdate일 때만 setValue가 동작하여 입력을 할 수 있다.
• maxLen이라는 함수를 만들어 입력값이 10자 이하일 때 true, 이상이면 false를 return하도록 한다.
• 리턴 값이 willUpdate로 들어간다.
• 입력값이 10자를 넘으면, willUpdate가 false가 되므로, 더 이상 입력할 수 없게 된다.

 

+ ES6 문법

• .... : 전개 연산자, 배열의 모든 값을 반환하는데 사용한다
• 객체에서 key와 값이 같을 때 축약해서 사용할 수 있다. ex) {x:x, y:y} = {x, y}

 

 

useTabs

 

버튼을 두 개 만들고, 버튼을 클릭하면 해당하는 내용을 보여주도록 해보자.

import React, { useState } from "react";

const content = [
  {
    tab: "Section 1",
    content: "I am Section 1"
  },
  {
    tab: "Section 2",
    content: "I am Section 2"
  }
];

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if(!allTabs || !Array.isArray(allTabs)){
    return;
  }
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
}

const App = () => {
  const {currentItem} = useTabs(0, content);
  
  return (
    <div>
      {content.map((section, index) =>
        <button onClick={()=>changeItem(index)}>{section.tab}</button>
      )}
      <div>
        {currentItem.content} 
      </div>
    </div>
  );
}

export default App;

• API 등으로부터 데이터를 가져오는 상황을 content 변수로 가정
• currentIndex라는 state을 만들고, 초기값으로 initialTab을 사용
• 우리는 현재 선택한 탭의 content를 얻고 싶음
• usetTabs(0); >>> 0번째 인덱스의 원소를 의미함
• allTabs가 content이므로 content의 0번째 원소가 currentItem이 됨
• if문으로 에러를 잡음 > content가 없거나, content가 배열이 아닐 때
• map의 index를 활용 > index를 changeItem에게 주고 > changeItem은 setCurrentIndex를 통해 index를 바꿈 > 해당 index에 맞는 내용이 출력되도록 함

---

뭔가 useState은 변수가 꼬리에 꼬리를 물듯이 있는 기분이라 더 집중이 필요한거 같다 ^_ㅠ