React Curly Braces

Curly Braces

• JSX 에서 자바스크립트 표현식을 작성할 때 사용하는 방법
• JSX 안에 { }로 영역을 지정하여 그 안에 자바스크립트를 작성

---

1. 요소 컨텐츠에 자바스크립트 표현식을 쓰고자 할 때 사용
2. 주석 처리 - HTML 주석을 사용할 수 없기 떄문에 JS 주석을 사용
3. JSX에서 인라인 스타일을 적용할 때 사용
   • JSX에서 인라인 스타일은 문자열X 객체로 표현 {{ value }}

---

import React from 'react'

export default function CurlyBraces() {
	const title = 'Curly Braces'
	return (
		<>
			{/* 주석 입니다*/}
			<h1 style = {{backgroundColor: 'red'}}>{title}</h1>
			<p>{10+30}</p>
		</>
	)

• Curly Braces 에서는 객체를 반환 해줄때 객체 자체는 반환이 불가능 하다
  - 명확한 결과값을 가진 숫자, 문자열, 논리형을 반환
  - person이라는 객체에 name , theme 가 있다면 person을 사용하면 오류 발생
  - 해결법: person.name, person.theme 로 호출

• 구조화 파괴 가능(Destructuring)
  - const {name, theme} = person
  - person이라는 객체를 파괴하여 name, theme 변수에 초기화