[React] 공식 문서 스터디 1-4. JavaScript in JSX with Curly Braces | JSX에서 JavaScript 사용하기

목차
0. 시작하기
1. 따옴표로 문자열 전달하기
2. 중괄호 사용하기: JavaScript 세계를 들여다보는 창
3."이중 중괄호" 사용: JSX 내에서의 CSS 및 다른 객체
4. javaScript 객체와 중괄호로 더 재미있게 즐기기

 

0. 시작하기

• 마크업 + JavaScript 로직 or 동적 프로퍼티 참조
• ⇒ JSX에서 중괄호를 사용하여 JavaScript 작성 가능

💡 학습 내용

• 따옴표로 문자열을 전달하는 방법
• 중괄호를 사용하여 JSX 내에서 JavaScript 변수를 참조하는 방법
• 중괄호를 사용하여 JSX 내에서 JavaScript 함수를 호출하는 방법
• 중괄호를 사용하여 JSX 내에서 JavaScript 객체를 사용하는 방법

 

1. 따옴표로 문자열 전달하기

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

 

• JSX에 문자열 속성 전달
• → 작은 따옴표 or 큰 따옴표로 묶기

 

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

 

• 동적으로 지정
• { }를 사용하여 JavaScript 값 사용

 

2. 중괄호 사용하기: JavaScript 세계를 들여다보는 창

const today = new Date();

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

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

/* 반환 결과
To Do List for  Saturday
*/

 

• 중괄호 안에서 JavaScript 사용 가능
• 중괄호 사이에는 formatDate() 와 같은 함수 호출을 포함하여 모든 JavaScirpt 표현식 작동

2-1. 중괄호 사용 위치

JSX 내부에서 두 가지 방법으로 사용 가능하다

1) JSX 태그 안에 직접  텍스트로 사용

<h1>{name}'s To Do List</h1>

 

2) = 기호 바로 뒤에 오는 속성

src={avatar} : 아바타 변수를 읽음

src="{avatar}" : 문자열 "{avatar}" 를 전달함

 

3. "이중 중괄호" 사용: JSX 내에서의 CSS 및 다른 객체

• JSX로 객체 전달 가능
• → 객체는 중괄호로 표시할 수도 있음 { name: "Hedy Lamarr", inventions: 5 }
• JSX에서 JS 객체 전달 ⇒ 다른 중괄호 쌍으로 객체 감싸기 (person={{ name: "Hedy Lamarr", inventions: 5 }}

 

export default function ToDoList() {
	return (
		<ul style={{
			backgroudColor: 'black',   // 프로퍼티 카멜케이스로 작성
			color: 'pink'
		}}>
			<li>a</li>
			<li>a</li>
			<li>a</li>
		</ul>
	);
}

 

• JSX의 인라인 CSS 스타일에서 이중 중괄호 사용
• 중괄호 내부에 JavaScript 객체

4. javaScript 객체와 중괄호로 더 재미있게 즐기기

const person = {
	name: 'Gregorio Y. Zara',
	theme: {
		backgroudColor: 'black',
		color: 'pink'
	}
};

export default function ToDoList() {
	return (
		<div style={person.theme}>
			<h1>{person.name}'s Todos</h1>
			<img
				className="avatar"
				src="https://i.imgur.com/7vQD0fPs.jpg"
				alt="Gregorio Y. Zara"
			/>
			<ul>
            	<li>Improve the videophone</li>
       			<li>Prepare aeronautics lectures</li>
        		<li>Work on the alcohol-fuelled engine</li>
  			</ul>
		</div>
	);
}

 

• 여러 표현식을 하나의 객체로 이동하여 중괄호 안에 있는 JSX에서 참조 가능
• JSX - JavaScript를 사용하여 데이터와 로직 구성 가능

• person JavaScript 객체
  • name 문자열
  • theme 객체

 

---

https://react.dev/learn/javascript-in-jsx-with-curly-braces

JavaScript in JSX with Curly Braces – React

해당 문서를 공부하며 작성하였습니다

피드백은 언제나 환영입니다 !