[Describing the UI] JavaScript in JSX with Curly Braces | 중괄호로 JSX에 자바스크립트 넣기

JSX는 자바스크립트 파일 안에서 HTML과 같은 마크업을 작성할 수 있게 만들어주고 이를 통해 렌더링 로직과 콘텐츠는 같은 곳에 들어가요. 때때로 약간의 자바스클비트 로직을 넣고 싶을 수도 있어요. 아니면 마크업 안에 있는 동적 속성을 참조하고 싶을 때도 있고요. 이러한 상황에서 중괄호를 사용하면 JSX 안에서 자바스크립트를 위한 창을 열 수 있어요.

이 페이지에서는

    - 따옴표로 문자열을 어떻게 전달하는지
    - 중괄호를 사용하여 JSX 안에서 자바스크립트 변수를 어떻게 참조하는지
    - 중괄호를 사용하여 JSX 안에서 자바스크립트 함수를 어떻게 호출하는지
    - 중괄호를 사용하여 JSX 안에서 자바스크립트 객체를 어떻게 사용하는지

를 알아볼 거예요.

---

Passing strings with quotes | 따옴표로 문자열 전달하기

JSX에 문자열 속성을 전달하고 싶다면 큰따옴표 또는 작은 따옴표 안에 문자열을 넣으세요.

 

 

여기서 "https://i.imgur.com/7vQD0fPs.jpg"와 "Gregorio Y. Zara"는 문자열로 전달되었어요.

 

그러나 만약 동적으로 src와 alt를 지정하고 싶다면 어떻게 해야할까요? "와 "을 {과 }로 대체하여 자바스크립트에서 값을 가져올 수 있어요.

 

 

이미지를 동그랗게 만들어주는 "avatar"라는 CSS 클래스 이름을 특정하는 className="avatart"와 avatar라고 불리는 자바스크립트 변수의 값을 읽어오는 src={avatar}의 차이점에 주목하세요. 중괄호가 마크업 안에서 자바스크립트로 작업할 수 있도록 만들어주기 때문이에요.

---

Using curly braces: A window into the JavaScript world | 중괄호 사용하기: 자바스크립트 세상으로의 창

JSX는 자바스크립트를 작성하는 특별한 방법이에요. 이는 중괄호인 { }를 통해 그 안에서 자바스크립트를 사용할 수 있다는 것을 의미해요. 아래 예시는 먼저 과학자의 이름인 name을 선언하고 나서 그것을 <h1> 안에 중괄호로 넣고 있어요.

 

 

name의 값을 Gregorio Y. Zara에서 Hedy Lamarr로 변경해보세요. 리스트의 이름이 어떻게 바뀌는지 보이나요?

formatDate()와 같은 함수 호출을 포함한 어떤 자바스크립트 표현식이라도 중괄호 안에서는 작동할 거예요.

 

Where to use curly braces | 어디서 중괄호를 사용하나요?

JSX 안에서 두 가지 방법으로만 중괄호를 사용할 수 있어요.

1. JSX 태그 안에서 직접 텍스트로 사용하는 경우: <h1>{name}'s To Do List</h1>는 작동하지만 <{tag}>Gregorio Y. Zara's To Do List</{tag}>는 그렇지 않아요.
2. = 기호 뒤에 즉시 나오는 속성으로 사용하는 경우: src={avatar}는 avatar 변수를 읽을 것이지만 src="{avatar}"는 문자열 "{avatart}"를 전달해요.

---

Using “double curlies”: CSS and other objects in JSX | "이중 괄호" 사용하기: CSS와 JSX의 다른 객체

문자열, 숫자 그리고 다른 자바스크립트 표현식에 더해 JSX에서는 객체도 전달할 수 있어요. 객체도 { name: "Hedy Lamarr", inventions: 5 }와 같이 중괄호로 나타내요. 그러므로 JSX에서 JS 객체를 전달하기 위해서는 또 다른 쌍의 중괄호로 객체를 감싸야해요. {person={{ name: "Hedy Lamarr", inventions: 5 }}처럼요.

 

JSX에서는 인라인 CSS가 이렇게 쓰여있는 것을 볼 수 있어요. 리액트는 인라인 스타일을 사용할 필요가 없어요. CSS 클래스는 대부분 잘 작동하지만요. 그러나 인라인 스타일을 사용한다면 객체를 style 속성으로 전달해요.

 

 

backgroundColor와 color의 값을 변경하세요.

 

이렇게 작성하면 자바슼릡트 객체를 중괄호 안에서 볼 수 있어요.

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

 

{{와 }}를 다음에 JSX에서 보게 된다면 JSX 중괄호 안에는 객체 이상의 것은 없다고 이해하세요.

 

함정
인라인 style 속성은 카멜케이스로 작성하세요. 예를 들어서 컴포넌트 안에서 HTML <ul style="background-color: black">는 <ul style={{ backgroundColor: 'black' }}>으로 작성되어야만해요.

---

More fun with JavaScript objects and curly braces | 자바스크립트 객체와 중괄호에 대한 더 흥미로운 사실

여러분은 하나의 객체로 여러 표현식을 옮길 수 있지만 JSX 안에서는 중괄호로 참조하세요.

 

 

이 예시에서 자바스크립트 객체 person은 문자열 name과 객체인 theme을 포함하고 있어요.

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

 

아래와 같이 컴포넌트는 person에서 이 값을 사용할 수 있어요.

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

 

JSX는 요약된 데이터나 자바스크립에 사용하는 로직을 실행하는 굉장히 작은 템플릿 언어예요.

---

Recap | 요약

이제 JSX에 대한 거의 모든 것을 알게 되었어요.

• 따옴표 안의 JSX 속성은 문자열로 변환된다.
• 중괄호는 자바스크립트 로직과 변수를 마크업으로 가져와요.
• JSX 태그 콘텐츠나 `=` 연산자 이후에 즉시 사라져요.
• `{{`과 `}}`는 특별한 문법이 아니에요. JSX 중괄호 안에 있는 자바스크립트 객체예요.

---

Challenges | 도전과제

1. 실수 고치기

Objects are not valid as a React child라는 오류 메시지가 발생해요.

 

 

문제를 찾았나요?

 

중괄호 안에 무엇이 있는지 보세요. 알맞은 것을 넣었나요?

이 예시는 문자열이 아니라 객체 자체가 마크업으로 렌더링되기 때문에 발생해요. <h1>{person}'s Todos</h1>은 모든 person 객체 전체를 렌더링하려고 해요. 텍스트 콘텐츠로 원시 객체를 포함시키는 것은 리액트는 어떻게 화면에 뿌릴지 모르기 때문이에요.

 

이를 고치려면 <h1>{person}'s Todos</h1>를 <h1>{person.name}'s Todos</h1>로 수정하세요.

 

 

2. 객체로 정보 추출하기

사진 URL을 person 객체로 추출해보세요.

 

사진 URL을 person.imageUrl이라는 속성으로 옮기고 <img>태그에서 중괄호를 사용하여 이를 읽어오세요.

 

 

3. JSX 중괄호 안에서 표현식을 작성해보세요.

아래의 객체에서 전체 사진 URL은 네 부분, 기본 URL(bas eURL), imageId, imageSize 그리고 파일 확장자로 나뉘어져요.

 

우리는 사진 URL을 기본 URL(항상 https://i.imgur.com/), imageId(7vQD0fP), imageSize(s), 그리고 파일 확장자(항상 jpg) 속성들과 결합하고 싶어요. 그러나 <img> 태그가 src를 지정하면서 무언가 오류가 발생했어요. 어떻게 고칠 수 있나요?

 

 

수정사항이 동작하는지를 확인하려면 imageSize 값을 'b'로 변경해보세요. 수정 후에, 사진의 크기가 바뀔 거예요.

 

src={baseUrl + person.imageId + person.imageSize + '.jpg'}로 작성하면 돼요.

1. 자바스크립트 표현식에서 {를 여세요.
2. baseUrl + person.imageId + person.imageSize + '.jpg'을 알맞은 URL 문자열로 생성하세요.
3. 자바스크립트 표현식에서 }<를 닫으세요.

 

아래의 getImageUrl와 같이 분리된 함수로 이 표현식을 옮길 수 있어요.

 

 

변수와 함수는 마크업을 간결하게 만들어줘요!