[React]React DOM & UseRef

3주 블로깅 챌린지~~💻 ✍️

1_React-DOM📕

---

리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다. react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있다. 리액트는 순수 자바스크립트로 컴포넌트를 만들어 브라우저를 구성한다. 하지만 브라우저는 CSS, HTML 그리고 순수 자바스크립트를 이용할 수 있다. 리액트를 보면 순수 자바스크립트와 다른 문법을 볼 수 있다. 이러한 다른 부분은 Babel을 통해 순수 자바스크립트로 변환되어야 한다. HTML 과 연결하는 작업이 필요한데 그 작업을 React-Dom이 하게된다.

가상돔이란, 실제 DOM을 메모리에 복사해준 것이라 생각하면 된다.
데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용시켜준다. 바뀐 부분을 찾아서 바꿔주는 과정을 Diffing이라고 부르며, 바뀐 부분을 실제 돔에 적용시켜 준다. 요소가 여러개 변하였더라도 한번에 묶어서 실제돔 수정을 해주기 때문에 시간과 비용이 절약되는 효과가 있다

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

위처럼 ReactDOM.render()를 통하여 연결할 수 있다.index.js에서 최상위 root에 연결하는 코드를 볼 수 있고, 우리는 <App> 컴포넌트부터 시작해서 컴포넌트들을 작성하여 App을 만들 수 있다.

2_useRef📕

---

HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 <div id="my-id"> 와 같이 id를 사용한다. 이렇게 하면 특정한 id에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다.

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
  <div>
    <input ref={주소값을_담는_그릇} type="text" />
      {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
      {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
      {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
  </div>);


function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
  inputEl.current.focus();
};
return (
  <>
    <input ref={inputEl} type="text" />
    <button onClick={onButtonClick}>Focus the input</button>
  </>);
}

ref를 사용해야하는 상황

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용