[TIL] Day 35 useRef, className 사용에 대한 이해 (React)

2023.11.22 수

 

React는 가상 DOM(Virtual DOM)을 기반으로 하는 자바스크립트 라이브러리로, 사용자 인터페이스를 효율적으로 구축하고 관리할 수 있게 해준다.

이를 위해 React에서 제공하는 여러 기능 중 useRef, className, document.querySelector에 대한 사용 방법을 알아보자!

 

 

useRef와 className의 목적

React에서 useRef와 className은 각각 다른 목적으로 사용된다.

 

useRef

주로 DOM 요소에 접근할 때 사용된다.

함수 컴포넌트에서 클래스 컴포넌트의 this와 유사한 역할을 한다.

useRef를 사용하여 DOM 요소에 접근할 수 있으며, 해당 정보 값을 통해서 DOM을 수정할 수 있다.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
 const myRef = useRef(null);

 useEffect(() => {
   // myRef를 통해 DOM 요소에 접근
   console.log(myRef.current);
 }, []);

 return <div ref={myRef}>내 컴포넌트</div>;
}

 

className

React에서는 요소에 클래스를 적용할 때 className을 사용한다.

본목적은 원하는 요소에 스타일을 적용하기 위함이다.

import React from 'react';

function StyledComponent() {
 return <div className="my-styled-component">스타일이 적용된 컴포넌트</div>;

 

여기서 "my-styled-component"는 CSS에서 정의된 스타일을 적용하기 위한 클래스 이름이다.

 

 

document.querySelector 사용에 대한 주의

React에서는 document.querySelector를 직접 사용하는 것이 권장되지 않는다.

React에서는 Virtual DOM을 사용하여 DOM 조작을 추상화하고 관리한다.

그래서 직접적인 DOM 조작은 피하고, 대신에 상태 및 속성을 이용하여 React의 기능을 최대한 활용하는 것이 좋다. 

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 예시: count가 변경될 때마다 실행되는 효과
    console.log('Count가 변경되었습니다.');
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

위 코드에서는 useState와 useEffect를 사용하여 React의 상태와 생명주기를 관리하고 있다.

직접적인 DOM 조작 없이 React가 상태의 변경을 감지하고 업데이트를 수행한다.

이를 통해 코드의 가독성과 유지보수성이 향상되는 장점이 있다.

 

 

---

하루를 마치며

React에서 사용하는 useRef와 className의 주목적과 기존 JS에서 사용해왔던 document.querySelector를 왜 사용하지 않는지 그 이유에 대해서 자세히 알아볼 수 있었다.

DOM을 다루는 방법을 익히고 예제를 분석하면서 앞으로 개발을 진행할 때 코드의 가독성과 유지보수성을 높일 수 있는 방법이 무엇인지 알게 되었다.

React의 강력한 기능을 최대한 활용하여 효율적이고 안정적인 애플리케이션을 개발하는 것 좋은 개발자의 핵심이다!

 

 

오늘의 한 줄
좋은 개발자로 거듭나기