태그 속성값 표기 방법: 문자열 vs 중괄호({}) 🤔

💬 "속성값이 변수가 아닌 문자열인 경우, 왜 중괄호({})를 붙이는 거예요?"

팀 프로젝트 중에 속성값 표기 방식이 제각각이라, 개발팀 회의 때 이렇게 질문한 적이 있다.

프론트엔드 개발자분들, 혹시 비슷한 상황을 겪어본 적 있으신가요? 🤔

이 글에서는 태그 속성값을 작성하는 두 가지 방법과,
언제 어떤 방식을 사용하면 좋은지를 간단하고 쉽게 정리해보려고 한다. 😊

---

✨ 태그 속성값 작성법에는 두 가지 방법이 있다

태그 속성값을 작성할 때 사용하는 방식은 크게 두 가지입니다.

1. 문자열로 표기하기

가장 기본적인 방법으로, 속성값을 따옴표(" 또는 ')로 감싸서 작성한다.

<input type="text" value="Hello" />

• 특징
  • 속성값이 항상 동일한 정적인 값을 유지한다.
  • HTML 속성과 유사해서 읽기 쉽고 간단하다.
• 언제 사용하면 좋을까?
  • 색상 값, 고정된 텍스트, 불리언 값 등 변하지 않는 정적인 데이터를 설정할 때 적합하다.

---

2. 중괄호({})로 표기하기

중괄호를 사용하면 JavaScript 코드를 작성할 수 있어요. 따옴표 대신 중괄호({})로 값을 감싼다.

const inputValue = "Hello World"; <input type="text" value={inputValue} />

• 특징
  • JavaScript 표현식이나 변수를 활용할 수 있다.
  • 값이 동적으로 변할 때 사용된다.
  • 상태 값(state)이나 계산된 값을 사용할 때 강력하다.
• 언제 사용하면 좋을까?
  • 변수나 함수 호출, 또는 API로부터 받은 데이터를 속성값으로 설정할 때 적합하다.

---

정적인 값도 중괄호를 사용할까? 팀원 간 스타일 통일은? 🎯

정적인 값도 중괄호로 작성하는 경우를 볼 수 있는데, 이유는?

• 코드의 일관성을 유지하기 쉽다.
• 정적인 값에서 동적인 값으로 변경할 때 실수를 줄일 수 있다.

그러나, 정적인 값은 문자열 표기를 권장하는 팀도 많다.

• 가독성이 높아지고 직관적이기 때문

---

👉 결론: 팀스타일을 통일하자!

태그의 속성값을 작성할 때, 팀 내 공통 스타일을 정하는 것이 중요하다.

• 정적인 값은 문자열 표기를 사용할지,
• 모든 값에 중괄호를 사용할지

최종적으로, 가독성과 효율성을 고려해 팀에 맞는 방식을 선택해야 한다.

 

💡 TIP
코드 리뷰 단계에서 린트(Lint) 도구나 프리티어(Prettier)를 사용하면 스타일 통일을 자동화할 수 있다.

---

📌 마무리

우리 팀은 일관성을 위해 모든 속성값을 중괄호로 작성하기로 했다!

이 글을 보고 있는 개발자 여러분은 어떤 방식을 선호하시나요? 댓글로 의견을 나눠주세요! 😊