학습내용
- 따옴표로 문자열을 전달하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법
◼ 따옴표 문자열
JSX에 전달하려면 작은따옴표('')나 큰따옴표("")로 묶어야 합니다.
동적으로 사용할떄는 {} 중괄호를 사용합니다.
<img
className="avatar" // 정적
src={avatar} // 동적
alt={description}
/>
[+중요]
'',"" 와 {} 차이점은.
중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있으며, state에 저장된 데이터를 실시간을 반영이 가능합니다.
◼ 중괄호 사용하기: JavaScript 세계로 연결 하는 창
{} 사이에는 javascript 코드를 사용할수 있습니다.
const today = new Date();
function formatDate(date) {
return new Intl.DateTimeFormat(
'en-US',
{
weekday: 'long', // short , narrow 있음
year: '2-digit',
month: '2-digit'
day: 'numeric'
}
).format(date);
}
export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
);
}
중괄호는 이렇게 사용하면 안되요
JSX 태그 안
- [O] <h1>{name}'s To Do List</h1>는 작동합니다.
- [X] <{tag}>Gregorio Y. Zara's To Do List</{tag}>는 작동하지 않습니다.
어트리뷰트
- [O] src={avatar}는 avatar 변수를 인식합니다.
- [X] src="{avatar}"는 "{avatar}" 문자열을 전달됩니다. ( src ={`${avatar}`})는 가능)
function Component ({children}) {
return <h2>h2자리 {children}</h2>
}
export default Todo () {
let name = '이름';
let H1 = h1;
let H2 = Component;
let H3 = 'h3';
let H4 = Component;
return (
[안되는 경우]
<{H1}>h1 태그 사용 안됨</{H1}> // 태그 안됨
<{H2}>h2 태그 사용 안됨</{H2}> // 중괄호 사용으로 안됨
<H3>h1 태그 사용 안됨</H3> // 문자열이라 안됨
[되는 경우]
<div>{name}</div> // 이름 //값사용 가능
<H4>내용전달</H4> // 출력:h2자리내용전달
);
}
◼ 이중중괄호 시용하기: JSX의 CSS와 다른 객체
JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다.
// 인라인 style 프로퍼티는 카멀케이스로 작성
<ul style={ // JSX 중괄호 안에
{ // javascript 객체
backgroundColor: 'black',
color: 'pink',
fontSize: 20
}
}>
◼ 요약
- 따옴표 안의 JSX 어트리뷰트는 문자열로 전달됩니다.
- 중괄호를 사용하면 JavaScript 논리와 변수를 마크업으로 가져올 수 있습니다.
- JSX 태그 내부 또는 어트리뷰트의 = 뒤에서 작동합니다.
- {{ 및 }} 는 특별한 문법이 아닙니다. JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.
[참고]
https://ko.react.dev/learn/javascript-in-jsx-with-curly-braces
'[노트장] 적으며 정리해 보는 이론 > 리액트문서' 카테고리의 다른 글
[리액트문서보기][상호작용성 더하기] 이벤트에 응답하기 (0) | 2024.03.25 |
---|---|
[리액트문서보기][UI 표현하기]컴포넌트 순수하게 유지하기 (0) | 2024.03.25 |
[리액트문서보기][UI 표현하기] 첫번째 컴포넌트 (0) | 2024.03.19 |
[리액트문서보기] React로 사고하기(구조 나누기, state위치 선정 등) (0) | 2024.03.18 |
[리액트문서보기] Quick Start (0) | 2024.03.17 |