[REACT] JSX에서 Javascript 사용하기 - 공식 문서랑 같이 공부하기 시리즈5

JSX에서 Javascript 사용하기

JSX에서 문자열 속성은 작은 따옴표 또는 큰 따옴표를 사용한다.

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

만약 src와 alt를 동적으로 지정하고 싶다면 어떻게 해야할까?

바로 " " 대신 { } 를 사용하는 것이다!

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

중괄호 { } 는 JSX에서 Javascript를 사용할 수 있게 해준다. 

따라서 아래처럼 중괄호 사이에 함수를 호출할 수도 있다.

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

중괄호 사용 위치

1. 텍스트로서 사용 가능

OK : <h1> {text}처럼 태그 내부에서 사용 가능 </h1> 

NG : <{tag}> 태그로는 사용 불가능 </{tag}>

2. 속성에 사용 가능

OK: <img src={avatar} />

NG: <img src="{avatar}" /> 이렇게 사용하면 중괄호를 포함하여 문자열 그대로 인식이 된다.