[React🩵] id와 className

HTML을 대~충 보고 넘어왔더니 새로 보는 개념들이 많다

그 중에 id와 class이라는 HTML 속성에 대해 들었는데, 리액트에서도 사용이 된다고 함

id, className은 각각 언제 사용되는지 어떤 역할을 하는지 알아보자

 

 

01.  id(고유 식별자)

특정한 하나의 요소를 고유하게 식별한다(한 페이지에 같은 id는 하나만 있어야한다)

 

 

1-1.  CSS 예시 - 스타일링

//jsx
const App = () => {
  return <h1 id="main-title">이건 제목!</h1>;
};

//css
#main-title {
  color: red;
  font-size: 30px;
}

위 예시처럼 jsx에서 여러개의 h1이 있을 수 있고, 여러개의 h1 중에 단 하나의 h1 요소에만 스타일링을 할 수 있음

 

 

1-2.  JS 예시 - 버튼클릭

const App = () => {
  return (
    <div>
      <h1 id="main-title">이건 제목!</h1>
      <button onClick={changeColor}>색 변경</button>
    </div>
  );
};

const changeColor = () => {
  document.getElementById("main-title").style.color = "blue";
};

하나의 버튼을 클릭하면 컬러체인지

 

 

1-3.  HTML 앵커(페이지 이동)

const App = () => {
  return (
    <div>
      <a href="#section2">두 번째 섹션으로 이동</a>
      <div id="section2" style={{ marginTop: "500px" }}>여기가 두 번째 섹션!</div>
    </div>
  );
};

페이지 내 특정 위치로 이동

 

 

여기까지 들었을 때 든 생각은... 왜 굳이?... 그냥 코드로 짜면 안되는 건가? 싶기도 한데

특정 요소를 이벤트의 조건으로 설정할 때 id를 사용하면 좋을 것 같았다

 

내가 공부하던 swift로 따지면 @objc func buttonTapped() 메서드 같이 이벤트 핸들러를 따로 분리하는 것처럼

코드가 길어지는 것을 방지하고 하나의 특정 요소에만 이벤트를 줄 수있다는 것

 

 

➡️ 나중에 공부할 React의 useState를 활용하면 더 깔끔한 코드로 리팩토링이 가능하다고 한다(기억해두기)

 

 

 

 

 

 

02.  className(CSS 클래스 스타일링)

얘는 조금 더 간단하다
CSS에서 여러 요소에 같은 스타일을 적용하고 싶을 때 사용한다(재사용 가능)

 

//React
const App = () => {
  return (
    <div>
      <h1 className="title">첫 번째 제목</h1>
      <h2 className="title">두 번째 제목</h2>
    </div>
  );
};

//CSS
.title {
  color: blue;
  font-size: 24px;
}

h1, h2에 같은 스타일 적용

 

 

얘는 개념이 조금 더 간단해서 이해가 쉬웠다

Swift에서 Extention으로 UI요소를 일괄적으로 관리하던 것처럼 이해하면 될 듯

 

 

➡️ 얘도 나중에 공부할 useState를 활용하면 동적으로 관리할 수 있다고 한다