React - Hook 리액트 훅 사용법 정리 (1) useState,useRef,createRef

 

#1. useState 사용하기

useState(기본값) 은 get변수/set변수를 리스트로 반환한다.

get변수는 count 라는 변수이름으로 받고, set함수인자는 setCount라고 받아서 사용한다.

클릭시 바로 setCount에 Count+1를 설정할수 있다.

또는 onChange 이벤트에 다른 커스텀 함수를 연결해서, taget:{value} 를 가져와서 email를 set 할수도 있다.

import React, { useState } from "react";
import "./styles.css";

const Section = ({ title, children }) => (
  <div>
    <div>{title}</div>
    <div>{children}</div>
  </div>
);

export default function App() {
  //------------------------------------------------------------------
  //useState는 array를 반환 => get변수/set변수
  const [count, setCount] = useState(0);
  const [email, setEmail] = useState("");
  //onChange이벤트를 e로 받아서 처리하기.
  const updateEmail = e => {
    const {
      target: { value }
    } = e;
    setEmail(value);
  };
  //------------------------------------------------------------------
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Section title="useState 사용해보기">
        <div>
          <div>
            {count}
            <br />
            <button onClick={() => setCount(count + 1)}> 증가시키기</button>
          </div>
          <div>
            <button onClick={() => setCount(count - 1)}> 감소시키기</button>
          </div>
          <div>
            <input placeholder="email" value={email} onChange={updateEmail} />
            <div>{email}</div>
          </div>
        </div>
      </Section>
    </div>
  );
}

 

#2. useRef createRef 사용하기

래퍼런스란, html의 요소를 참조하는 것이다. 즉. <div>...</div> 같은 노드, 요소를 참조 하는 변수를 만드는 것이다.

#2.1 useRef

useRef 래펀러스를 만든다.

30초뒤에 해당 래퍼런스가 포커스 된다(tab누른 효과)

해당 래퍼른스는 ref={inputRef} 로 연결시켜 준다.

  
  const inputRef = useRef();
  setTimeout(() => {
    inputRef.current.focus();
  }, 30000);
  
  //----------------------------------------------------------------------------------------
<input text="text" ref={inputRef} />

 

# 2.2.1 createRef사용하기

createRef란 컴포넌트didmount 나 update같은 기능이며,

다음 코드는 document의 어떤 요소를 클릭하면, 그 요소가 뭔지 콘솔출력해준다.

function clickOutside() {
  const ref = createRef();
  const handleClick = e => {
    console.log(e.target);
  };
  useEffect(() => {
    document.addEventListener("click", handleClick);
  }, []);
  return ref;
}

 

#2.2.2 createRef()

useEffect를 통해, 문서에다 click이벤트시 e.target을 가져오도록 함

createRef를 통해 특정 요소를 Ref로 정함

ref.current에 .contains ( e.taget) 이냐 라고 물어봐서

fn()을 실행시킴.

import React, { useRef, createRef, useEffect } from "react";
import "./styles.css";

const Section = ({ title, children }) => (
  <div>
    <div>{title}</div>
    <div>{children}</div>
  </div>
);

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

  const onClickOutside = () => {
    console.log("clickOutside!!");
  };
  const ref = clickOutside(onClickOutside);
  return (
    <div className="App">
      <Section title="useRef 사용해보기">
        <div ref={ref}>
          <h1> hello here</h1>
          <h2> im here </h2>
        </div>
      </Section>
    </div>
  );
}

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA