React - 중괄호{ } 가 있는 JSX의 JavaScript

JavaScript in JSX with Curly Braces

Passing strings with quotes

JSX에 string을 이용하여 정적으로 속성을 전달하려면 ' ' 또는 " " 로 사용한다. 하지만 동적이게 만들기를 원한다면 { }를 사용해야한다. { } 를 사용하면 JSX에서 바로 JavaScript를 사용할 수 있다.

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

Using curly braces: A window into the JavaScript world

{ }안에서 JavaScript 표현은 변수 뿐만 아니라 함수 또한 항상 동작한다.  

!주의 

- 태그에 { }를 사용할 수는 없다. 예) <{tag}>

- " " 안에 { }를 사용하면 문자열이 전달된다. 예) <img src="{avartar}"/> //{avartar}라는 문자열이 src속성이 된다.

 

Using “double curlies”: CSS and other objects in JSX

JSX에서 문자열, 숫자 및 기타 표현식 외에도 객체를 전달 할 수 있다.

객체는 { name: "Hedy Lamarr", inventions: 5 }로 표현이 되는데 JSX에서 JS를 전달하려면 { }를 사용하여 {{ name: "Hedy Lamarr", inventions: 5 }}로 표현한다.

그리고 tag안에 style을 사용하는 인라인 css의 경우에도 {{ }}를 이용합니다. 이때 style 속성은 cameCase로 써야한다.

  <ul style={{
      backgroundColor: 'black',
      color: 'pink'
 }}>

 

JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있게 해준다. 

 

JavaScript in JSX with Curly Braces