https://academy.nomadcoders.co/courses/enrolled/546456
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 시리즈 한 번 보고오기.
=====youtube=====
https://www.youtube.com/watch?v=yS-BU6eYUDE
https://www.youtube.com/watch?v=sZDvByH2mNU
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와 같다!
=====youtube end =====
다시 원래 강의로 돌아와서!
https://ko.reactjs.org/docs/hooks-intro.html
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
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
https://www.npmjs.com/settings/daheeahn-dooks/members
와우 내거다
로그인!
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
완성 ! ^.^
AWESOME!!!!!!!!!!!!!!!!!!!
업데이트는 변경사항 저장한담에
package.json에서 버전 다르게 한 후 저장!
그리고 똑같이 npm publish --access public
해주면 됨
근데
setTimeout(() => useTitle, 2000)
이런식으로 하면 안돼.
react가 싫어해
hooks 는 component위에 있어야해! 라는데?
https://www.youtube.com/watch?v=4P8Bb87hOf8&list=PL7jH19IHhOLOagok7uFWKlOleLF64grb6&index=18
7분쯤에.
hooks를 더 잘 알고싶다면,
useContext, useReducer, Callback, Memo에 대해 주목해.
'Develop > React Native' 카테고리의 다른 글
[React / RN] Styled Component 💅🏻 (0) | 2020.02.16 |
---|---|
[React / RN] Context API (Anti Redux!) with Hooks (0) | 2020.02.06 |
[더들어야함] React Apollo (0) | 2020.02.05 |
Facebook도 쓰는 GraphQL 정복하기 (0) | 2019.12.04 |
TDD 개발 방법론 (0) | 2019.09.14 |