[React] JSX의 이스케이프 백(escape back)

JSX 코드 내에서 JavaScript 표현식을 사용하는 방법(Escape into JavaScript from JSX attributes)

• JSX는 JavaScript 코드 내에 마크업(HTML) 코드를 포함할 수 있게 해줌
• 이때, 중괄호 { }를 사용하여, JSX 코드 내에서 JavaScript로 "탈출(이스케이프)"하여 변수나 표현식을 사용할 수 있음

 

return (
  <h1>
    {user.name} // 자바스크립트로 이스케이프 한 부분
  </h1>
);

 

• 중괄호{ } 안에 JavaScript 표현식(변수를 속성값으로 전달)을 넣으면, 그 값이 해당 위치에 렌더링 됨

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

 

• src 속성에 user.imageUrl 변수의 값을 전달하여 이미지의 경로를 설정
• 반면에 className="avatar"는 단순히 문자열을 전달하는 경우로, 이때는 중괄호 대신 큰 따옴표를 사용

 

JSX에서 "이스케이프 백(escape back)"은, 중괄호를 사용하여 JavaScript 표현식을 사용하거나 변수를 삽입하는 것을 의미한다. 이를 통해, JavaScript와 JSX를 유연하게 결합하여 동적인 UI를 만들 수 있다.