일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.
- DOM 요소의 id
<div id="my-element"></div>
❓🤔 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면?
👉 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다.
- public/index.html
- id가 root인 div 요소가 있음.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>- src/index.js
- id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있음.
(...)
ReactDOM.render(<App />, document.getElementById('root'));HTML에서 id를 사용해 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법도 있다. 바로 ref(reference)라는 개념!
❓🤔 리액트 컴포넌트 안에서 id를 사용하면 안 될까?
👉 리액트 컴포넌트 안에서도 id를 사용할 수는 있다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달된다. 하지만 특수한 경우를 제외하고 사용을 권장하지 않는다.
예를 들어 같은 컴포넌트를 여러 번 사용한다고 가정해 보자. HTML에서 DOM의 id는 유일(unique)해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기므로 잘못된 사용이라 할 수 있다.
ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다.
대부분 id를 사용하지 않고 원하는 기능을 구현할 수 있지만, 다른 라이브러리나 프레임워크와 함께 id를 사용해야 하는 상황이 발생할 수 있다. 이런 상황에서는 컴포넌트를 만들 때마다 id 뒷부분에 추가 텍스트를 붙여서(예: button01 button02 button03…) 중복 id가 발생하는 것을 방지해야 한다.
호떡 신문지에서 개발자로 환생