[React] 272샘의 React12 ( useRef Hook )

 

 

 

https://deahan.tistory.com/431

[React] 272샘의 React11 ( useState Hook )

 

에서 hook(훅) 느낌을 잊을 수 없다

useState로 사용한 값이 바뀌면 다시 그려진다(re-rendering)는 건 잊지말자.

 

오늘은 useRef 훅(hook)에 대해 알아 볼건데, 고것만 하면 너무 쉬우니...

styled-components란 재미난 것을 조금 섞어 보자

cmd(터미널) 에서 아래 명령어로 먼저 styled-components 모듈을 설치한다

npm install styled-components

 

MyButton.jsx

 

import styled from "styled-components";

const MyButton = styled.button`

  color: #fff;

  background-color: #0069d9;

  border-color: #0062cc;

  border-radius: 8px;

  margin-right: 10px;

  width : 49%;

  font-size : 2.0em;

`;

export default MyButton;

 

위 소스에서 styled.button`어쩌구 저쩌구`  표현을 이해하려면  tagged function 을

이해해야 하는데, 지금은  그냥 제공되는 button  태그에  백틱 안에 나열된 css 속성을 입힌

button 태그를 MyButton이라 이름 지었다공 쉽게 생각하자. (요게  styled component!)

tagged function 은 잘쓴다면 꽤 유용한 부분이 있으니 e7e샘이 별도로 글을 써주셧다..

 

MyTitle.jsx

import styled from "styled-components";

const MyTitle = styled.h1`

  color: yellow;

  background-color: black;

  border: 10px groove pink;

`;

export default MyTitle;

한개만 하면 재미없고 느낌이 없을것 같아서 h1태그도 1개 해보았다.

 

Counter2.jsx

 

import { useRef } from "react";

import MyButton from "./MyButton";

import MyTitle from "./MyTitle";

function Counter2() {

  let refVal = useRef(0); // 값을 reference

  const btnK = useRef(null); // DOM element reference

  const btnM = useRef(null); // DOM element reference

  const h1T = useRef(null); // DOM element reference

  const handleClick = (e) => {

    h1T.current.innerHTML = "너 경미니 좋앙?";

    if (e.target !== btnK.current) {

      h1T.current.innerHTML = "너 미누가 좋아??";

    }

    refVal.current = ++refVal.current;

    alert(refVal.current);

  };

  return (

    <div>

      <MyTitle ref={h1T}>나 흥경민</MyTitle>

      <MyButton ref={btnK} style={{ color: "yellow" }} onClick={handleClick}>

        눌렁 경미니

      </MyButton>

      <MyButton ref={btnM} onClick={handleClick}>

        누른 미누니

      </MyButton>

    </div>

  );

}

export default Counter2;

 

 useRef와 위에서 맹근 MyButton과 MyTitle 컴포넌트를 사용하였다.

 ref={ h1T } , ref={ btnK }, ref={ btnM } 등에 주목하자.

 

App.jsx   결과를 눈으로 보자!

 

import Counter2 from "./Counter2";

function App() {

  return (

    <div>

      <Counter2 />

    </div>

  );

}

export default App;

 

 

실행결과는 아래와 같지 않으면 너 집중 안한단고 e7e샘이 그랬음

설명이 없어도 왠지 알것  같은 느낌이 코를 파고든다.

 

먼저 styled component(MyButton...)는 백틱(`) 안에 css 코드가 자동완성이 지원되지 않아서

불편(머리를 쓰면 개선가능)하고, 손이 많이 가는 부담스런 점이 있지만

장기적으로 보고, 많이 만들어 둔다면 꽤 편리하게 생산성을 올릴 수 있다. 

 

useRef 훅(hook)도 눈치 빠른 사람은 아마도 벌써 소스와 실행결과를 눈으로

매칭시켰다면 이미 어느 정도 이해가 되었을 것.

 

사용 문법은 아래와 같고, 값을 참조할 수도, DOM Element등도 참조 가능하다.

let 또는 const  변수명 = useRef(초기값)

DOM Element 참조가 분명 더 많지 않겠는가? 

참조 하고픈 태그에 ref={변수명} 을 주는 것으로 세팅 완료다.

 

기억해야 할 것은(사실 자주쓰면 그냥 기억되어 버림)

useRef를 통해 선언된 변수는 current 속성 1개만 가지고,

선언된 변수값을 바꾸어도 컴포넌트를 다시 그리는(re-rendering)은 없다.

 

위 Counter2.jsx 안 handleClick 함수 안의 아래 소스는 전혀 react 스타일이 아님.

 

h1T.current.innerHTML = "너 경미니 좋앙?";

if (e.target !== btnK.current) {

  h1T.current.innerHTML = "너 미누 더 좋아?";

}

 

왜냐고? 묻는다면 innerHTML을 썼기 때문이다.

 

Counter2.jsx 만 useState를 넣어서 조금 수정을 해보자

 

import {useRef,useState} from "react";

import MyButton from "./MyButton";

import MyTitle from "./MyTitle";

import React from 'react'

function Counter2() {

    let refVal = useRef(0);// 값을 reference

    const btnK = useRef(null);// DOM element reference

    const btnM = useRef(null);// DOM element reference

    const h1T = useRef(null);// DOM element reference

    const [title,setTitle] = useState("나 흥경민");

    const handleClick = (e) => {

        if (e.target === btnK.current) {

          setTitle("너 경미니 좋앙?");

        } else {

          setTitle("난 미누가 더좋아!!!");

        }

        refVal.current = ++refVal.current;

        alert(refVal.current);

    };

    return (

    <div>

    <MyTitle ref={h1T}>{title}</MyTitle>

    <MyButton ref={btnK} style={{ color: "yellow" }} onClick={handleClick}>

        눌렁 경미니

    </MyButton>

    <MyButton ref={btnM} onClick={handleClick}>

        누른 미누니

    </MyButton>

    </div>

    )

}

export default Counter2

 

필히 결과는 쌤쌤일 것이다.

 

사실 스타일을 바꾸는 건 쉬운 일이 아니다.  화이팅 하자!!

들리는 아니 이미 들었던 소문에 의하면 페이스북 내에서  회사내 개발자들을

조사한 결과 React 스타일로 바뀌는 데 평균 약 3개월이 걸렸다 한다.

[ 3개월을 놀았단 이야기로 들린다면 넌 엉터리라고 e7e샘이 그랬다!!!]

 

useRef 사용법은 너무나 쉬운데 주의 사항이 있다. 아래 링크에 있다.

[ Pitfall 이라 쓰여진 부분을 꼭!! 체크하자, 예제도 도움이  될것이다. ]

https://react.dev/reference/react/useRef

 

 

 

 

출처 : https://e-7-e.tistory.com/260