[Hook] 노마드 코더로 hook 공부하기 (1)

노마드코더에서 hooks 무료강좌가 있어서 공부를 하며 정리(?) 해보았다.

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

Watch Now - Nomad Coders

 

훅을 사용하면 functional component에서 state를 가질 수 있게 해 준다.

앱을 리액트 훅으로 만든다면, class component, did mount, render... 등을 안 해도 된다.

funtional programming(함수형 프로그래밍) 스타일이 된다는 뜻이다.

---

useTitle - react document의 title을 몇 개의 hooks와 함께 바꾸는 것

useInput - 그냥 input 기능

usePageLeave - 유저가 page를 벗어나는 시점을 발견하고 함수를 실행

useClick - 누군가 element를 클릭하는 시점을 발견

useFadeIn - 어떤 element든 상관없이 애니메이션을 element안으로 서서히 사라지게 만든다.

useFullscreen - 어떤 element든 풀 스크린으로 만들거나 일반 화면으로 돌아가게 할 수 있다.

useHover - 마우스를 올렸을 때 반응

useNetwork - online 또는 offline 상태인지를 감지한다.

useNotification - notification API를 사용할 때 유저에게 알림을 보내준다.

useScroll - 스크롤할 때를 감지

useTabs - tab을 사용하기 쉽게 하는 것

usePreventLeave - 유저가 변경사항이나 무엇이든 저장하지 않고 페이지를 벗어나길 원할 때 확인하는 것

useConfirm - 어떤 기능과 비슷..?

useAxios - HTTP requests clients axios를 위한 wrapper 같은 것

 

https://codesandbox.io/dashboard/recent 

codesandbox는 VSC와 server 등 모든 것이 준비되어있는 사이트이다.

각 언어에 해당하는 것들이 모두 있다.

sandbox react를 클릭 새로 생성된 파일에서 ctrl+s 해주면 url이 new에서 title명으로 바뀐다.

그리고 타이틀명을 내가 원하는 것으로 바꿔주면 끝!

sandbox에서 작업해도 되고 vscode로 가져와서 작업해도 된다.

 

저장되는 줄 알았는데 다시 들어가니 사라져 있었다... vscode로 항상 백업을 하던가 아니면 vscode에서 작업하는 게 나을 거 같다.

---

useState

useState를 사용할 때는 import를 항상 해줘야 한다.

자동으로 생성되지만 안될 때도 있으니 확인을 해주거나 ctrl+space로 import 해준다.

useState의 첫 번째 아이템인 item과 두 번째 아이템인 setItem이 있다.

item은 현재의 value값을 나타내고 (=0) setItem은 변경 후의 value를 나타낸다.

변경 후의 value는 increase와 decrease로 정의해주었다.

페이지를 실행하면 my number : 0으로 출력이 되고 setItem을 increase와 decrease로 정의해준 button을 클릭하면 변경 후의 value가 나타나게 된다.

이렇게 간단하게 useState를 사용해서 increase, decrease 버튼을 생성해줄 수 있다.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function App() {
  const [ item, setItem ] = useState(0);
  let increase = () => { setItem(item+1) }
  let decrease = () => { setItem(item-1) };
  return (
    <div>
      my number : {item} <br/>
      <button onClick={increase}>Plus</button>
      <button onClick={decrease}>Minus</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

 

hook을 사용하지 않았다면 class를 만들어서 state로 item을 정의해준 뒤

increase, decrease를 람다식으로 생성을 해준 뒤 this.setState로 증감 함수로 생성을 해준다.

그리고 onClick에 넣어주면 작동할 것이다.

 

똑같이 작동은 하겠지만 코드의 길이와 복잡도가 증가한다.

hook을 잘 다룰 줄 안다면 더 빠르고 쉽게 코드를 짤 수 있을 것이다.

하지만 처음부터 hook으로 코드를 짜는 것보다 hook 없이 코드를 짤 수 있을 때, hook이 정말 좋은 것이구나를 느낄 수 있을 것 같다.

---

useInput

name은 value값과 onChange함수를 리턴 받는다.

{...name}은 value {name.value}와 onChange={name.onChange}를 모두 포함하고 있다.

name은 useInput으로 "Mr."값을 넣어준 것은 value에 "Mr."를 넣어준 것이다.

그러므로 value값에는 항상 Mr. 가 들어가게 된다.

maxLength에 value.length를 10보다 작거나 같게 하면 10보다 글자 수가 커지면 입력되지 않는다.

value.include에 특수문자를 넣으면 특수문자가 써지지 않는다.

2가지를 모두 하고 싶었지만 아직 하는 방법을 찾을 수는 없었다...

 

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function useInput (element, validator){
  const [ value, setValue ] = useState(element);
  const onChange = event => {
    const  {target : {value}} = event;
    let willUpdate = validator(value);
    if(willUpdate) {
      setValue(value);
    }
  }
  return {value, onChange}
}
function App() {
  const maxLength = (value)=> {
    return (value.length <= 10); 
    // return (!value.includes("#"));
  }
  const name = useInput("Mr.", maxLength);
  return (
    <div>
      <input placeholder="Name" {...name}/>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

---

useTabs

content인 Section 1,2를 배열로 생성해준다.

 

const App의 useTabs는 currentItem과 changItem을 리턴 시키는 용도이다.

0이면 Section 1을 선택 그리고 해당하는 content를 나타낸다.

button에 key값을 넣어주지 않으면 실행은 되지만 console에서 오류가 발생한다.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const content = [
  {
    tab:"Section 1",
    content: "I'm the content of the Section1"
  },
  {
    tab:"Section 2",
    content: "I'm the content of the Section2"
  },
]

const useTabs = (indexTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(indexTab)
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};

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

ReactDOM.render(<App />, document.getElementById('root'));