[강의노트] Hooks - 유투브

Tia Hwang·2020년 4월 17일
0

[Nomad] React Hooks

목록 보기
1/6

1. 리액트 Hooks 10분만에 사용법 배우기

1-1. function component에서 state를 가질 수 있게해줌

➡️ 즉, class component, didMount, render 필요없음❗

1-2. 기본적인 React 코드

import React from "react";

class App extends React.Component {
  state = {
    count: 0
  };
  modify = n => {
    this.setState({ count: n });
  };
  render() {
    const { count } = this.state;
    return (
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>Add</button>
      </>
    );
  }
}

export default App;

1-3. Hook을 사용한 코드

  • useState()는 array를 리턴
    • 첫번째 요소는 value: count => 0에서 시작
    • 두번째 요소는 value를 변경하는 방법: setCount()
import React, { useState } from "react";

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

export default App;

1-4. Effect Hooks

  • didMount, didUpdate과 비슷
  • API에 데이터를 요청할 때 사용

2. 리액트 훅! 코드를 따라치며 배워보자!

2-1. useRef()

  • 전체 컴포넌트 중 하나의 node, element를 선택하는 방법
  • Javascript의 document.getElementById()와 같은 방법

2-2. 완성된 코드

import React, { createRef, useEffect } from "react";

function clickOutside(fn) {
  const ref = createRef();
  const handleClick = e => {
    if (!ref.current.contains(e.target)) {
      fn();
    }
  };
  useEffect(() => {
    document.addEventListener("click", handleClick);
  }, []);
  return ref;
}

function App() {
  const onClickOutside = () => {
    console.log("Outside");
  };
  const ref = clickOutside(onClickOutside);
  return (
    <div className="App">
      <div ref={ref}>
        <h1>Hello Tia</h1>
        <h3>This should be a popup</h3>
      </div>
      <input type="text" />
    </div>
  );
}
export default App;
profile
프론트엔드 개발자로 취업하기

0개의 댓글