[React] 실전형 React Hooks 10개

https://academy.nomadcoders.co/courses/enrolled/546456

실전형 리액트 Hooks

 

 

useState, useEffect 

 

npm에는 자신의 use~ 라이브러리를 많이 배포하고

수많은 사람들이 자신의 hooks을 공유한다.

 

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 client axios을 위한 wrapper 같은 것

 

이걸 모두 npm package에 등록하는 법을 알려주고, 올릴 것

 

1. react, nodejs 깔려 있어야 함

2. npm 을 설치해놔야 package를 publish할 수 있어.

3. 

내 hooks를 자동으로 테스트하고 싶다

code sandbox를 이용할 것이다

code sandbox 들어가서 create! and React 클릭, command+s (저장)

그러면 fork가 될거야. 근데 안되면 우상단에 fork 누르기

https://codesandbox.io/s/musing-surf-rukq4

 

일단 여기서 시작하고, 나중에 hooks 코드 복붙할 것

 

4. 

노마드 유튭에서 hooks 시리즈 한 번 보고오기.



 

리액트의 역사, 사용법

 

리액트 훅 2가지 실제 사용 예시

2개 듣고 오기

 

결론적으로, functional component에서 state를 가질 수 있게 해줌

class component, didMount, render 이런거 안해도 돼. 그냥 모든것은 하나의 function이 되는 것

함수형 프로그래밍 스타일이 된다는 것!

 

훅의 역사는 recompose에서 시작됨

이 라이브러리는 리액트 팀에 의해 인수됨

so, recompose + 리액트팀 = 리액트 훅! 

 

옛 setState 예시)

  minus = () => {
    this.setState(current => ({
      count: current.count - 1
    }));
  };
  
  // 이렇게 current 쓸 수가 있었구나,, 이제 안쓸건데 뭐!

onClick={() => this.minus} 를 안하는법?? function으로 바꾸는 법?

const App = () => {
	const [count, setCount] = useState(0); // useState가 array로 주기 때문에
    return (
    	<>
        	{count}
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </>
    )
}

 

useState는 array를 리턴. 첫번째요소는 value, 두번째는 setCount.

[count, setCount]

[potato, kimchi] 해도 된다. 그냥 convention일 뿐

 

** e.target.value

const updateEmail = e => {
	const { target: { value } } = e // onChage!! // onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있습니다
    setEmail(value)
}

...
<input value={email} onChange={updateEmail} />

...

 

reducer를 만들 수 있지! ***

 

훅에서 effect hook이라는 것도 있어!

didMount, didUpdate와 비슷해. 주로 API 에서 데이터 요청할 때 사용!

리액트 JS 멤버십 강의에서 더 얘기하겠음.

what is higher order hook?

 

 

2번째 유튭

 

1) Handling Input: 인풋 관련

2) Fetching Data: 어느 API 에서는 편하게 데이터 요청하기

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function useInput(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  const onChange = e => {
    const {
      target: { value }
    } = e;
    setValue(value);
  };

  return { value, onChange };
}

function useFetch(url) {
  const [payload, setPayload] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const callUrl = async () => {
    try {
      const response = await fetch(url); // axios는 data를 reponse 안에 넣어서 줘~
      console.log(response.url)
      throw Error();
      setPayload(response.url);
    } catch {
      setError("ㅜㅜ");
    } finally { // 에러 유무에 관계없이 실행됨
      setLoading(false);
    }
  };

  useEffect(() => {
    callUrl(); // didMount만 되길 원한다면 바로 아랫줄처럼!
  }, []); // didMount할 때 callUrl을 불러라~ 업데이트 말고!

  return { payload, loading, error };
}

export default function App() {
  const name = useInput("");
  const { payload, loading, error } = useFetch("https://aws.random.cat/meow");
  return (
    <div className="App">
      <h1>Hello CodeSandbox!~~~~!!!</h1>
      <input {...name} placeholder="What's your name?" />
      {/* <input value={name.value} onChange={name.onChange} placeholder="What's your name?" /> */}
      <br />
      {loading && <span>loading your cat</span>}
      {!loading && error && <span>{error}</span>}
      {!loading && payload && <img width="150" src={payload} />}
    </div>
  );
}

 

useEffect: componentDidMount, didUpdate와 같다!

 

 

 

다시 원래 강의로 돌아와서!

Hook의 개요 – React

Hook 문서!

 

 

hooks는 react의 state machine에 연결하는 기본적인 방법.

코드가 깔끔해지고, 함수형 프로그래밍이 가능해짐! (함수 컴포넌트에서 state 사용 가능)

 

hooks는 함수형 프로그래밍을 권장한다.

// export default function App{ // 에서 2번째줄처럼!
const App = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

export default App;

 

함수형 프로그래밍은 그냥 return에 던져주면 되는데,

클래스 컴포넌트는

class AppUgly extends React.Component {
  state = {
    item: 1
  }

  increment = () => {

  }

  render() { // 꼭 render 해줘야 하고
    const { item } = this.state
    return (
      <div>
        <button onClick={this.increment} // 이렇게 this. 도 꼭 붙여주고
        />
      </div>
    )
  }
}

ugly!

 

 

- useNotification

user한테 알림허용 한 번 물어보면, 더이상 물어볼 방법이 없!

https://developer.mozilla.org/en-US/docs/Web/API/notification

Notification

 

mozilla~!

 

- useAxios

 

 

 

localStorage

getStorage

setStorage

이용해보기!!!

 

 

 

 

npm publish

이제 만든 hooks들을 각 폴더에 넣었을 것이다.

근데 여기엔 react 설치 따로 안해줘서 해줘야해

 

일단 /useTitle 에서부터 해보자.

1. npm init

2. 그러면 package.json이 생긴다

main: index.js

이건 꼭 있어야해! 이 패키지는 다른 사람이 설치해야하기 때문.

그리고 keyword는 react, react hooks 이렇게 했는데 react 가 두개 들어갔을거야 중복된거 지워주고

 

3. 근데 useState, useEffect는 여기에 설치되지 않아서, package.json에 방법을 추가해줘야해.

여기는 react가 설치되어 있어야 한다! 라고

npm i react react-dom

 

그러면 Package.json dependency에 생겨.

근데 여기 "dependencies" -> "peerDependencies" 로 바꾸기

이건 요구되지만, user가 이미 설치했다면 설치하지 않을거야. 설치할 필요가 없다는 뜻이야

설치됨 -> 중복으로 설치 x

설치안함 -> 설치하겠지

 

 

4. 이게 publish를 위한 전부!

이제 npm 에 organization 하나 만들자.

https://www.npmjs.com/org/create

npm

 

https://www.npmjs.com/settings/daheeahn-dooks/members

npm

 

와우 내거다!

 

로그인!

 

npm publish --access public

e403 에러가 난다면?

1) npm logout

2) npm login

 

그래도 안되면?

package.json의 name을 변경해보자!

나같은 경우는 @dooks/use-title 에서 @daheeahn-dooks/use-title로 변경한 후 npm i 한 뒤에

다시 npm publish --access public 하니까 잘됐다!

패키지 이름 문제일 수도!

 

도움받은 이슈: https://github.com/npm/npm/issues/9874

 

https://www.npmjs.com/settings/daheeahn-dooks/packages

npm

완성

 

 

 

AWESOME!!

 

업데이트는 변경사항 저장한담에

package.json에서 버전 다르게 한 후 저장!

그리고 똑같이 npm publish --access public

 

해주면 됨

 

 

 

hooks를 더 잘 알고싶다면,

useContext, useReducer, useCallback, useMemo에 대해 주목하자.