본문 바로가기
[노트장] 적으며 정리해 보는 이론/리액트문서

[리액트문서보기][UI 표현하기]중괄호 있는 JSX 안에서 자바스크립트 사용하기

by 졸린부엉이 2024. 3. 19.

학습내용

  • 따옴표로 문자열을 전달하는 방법
  • 중괄호가 있는 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