JSX 안에서 JS 표현식을 쓰기 위한 {}

241122 VSCode-Git Copilot에게 물어봄.

 

St2veK: @workspace /explain 블럭으로 싸둔 부분을, 왜 {}로 묶었는지 설명해줘. 

리엑트에서는 이렇게 JSX 문법으로 만들어진 태그 안에서 JS 표현식을 쓰려면, {} 로 묶어서 써야하는거야?

 

 

Workspace: 네, 맞습니다. React에서는 JSX 문법을 사용하여 HTML과 유사한 코드를 작성할 수 있습니다. 하지만 JSX 안에서 JavaScript 표현식을 사용하려면 중괄호 `{}`로 묶어야 합니다. 

선택한 코드에서 `{}`를 사용한 이유는 

map 함수를 사용하여 배열을 순회하면서 각 요소에 대해 JSX를 반환하기 위해서입니다. 중괄호를 사용하지 않으면 JSX 안에서 JavaScript 코드를 실행할 수 없습니다.

예를 들어, 아래와 같이 배열을 순회하면서 각 요소에 대해 JSX를 반환할 때 중괄호를 사용합니다:

const Post = () => {
    return (
        <PostContainer>
            {
                [1, 2, 3, 4, 5].map((v, i) => {
                    return (
                        <PostItem key={i}>
                            <h2>TITLE BOI</h2>
                            <h3>Title description, Nov 21th, 2024</h3>
                            <FakeImg height="200">Image인척 해버리기</FakeImg>
                            <p>내용인 척 해버리기</p>
                            <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
                            <br />
                        </PostItem>
                    );
                })
            }
        </PostContainer>
    );
};

이렇게 하면 

map 함수가 배열의 각 요소에 대해 JSX를 생성하고, 이를 PostContainer 안에 렌더링할 수 있습니다. 중괄호를 사용하지 않으면 JavaScript 코드를 JSX 안에 포함시킬 수 없기 때문에, 중괄호를 사용하여 JavaScript 표현식을 감싸야 합니다.

 

 

St2veK: 단순하게 줄이면, JSX 코드 안에서 JS 표현식을 쓰기 위해서는 {} 로 묶어야 한다고 이해하면 될까?

 

 

GitHub Copilot: 네, 맞습니다. 단순하게 말하면 JSX 코드 안에서 JavaScript 표현식을 사용하기 위해서는 중괄호 `{}`로 묶어야 한다고 이해하시면 됩니다. 

예를 들어, 아래와 같이 사용할 수 있습니다:

<div>
  {1 + 1} // JavaScript 표현식
</div>

이 경우, `{1 + 1}`은 JavaScript 표현식으로 평가되어 결과가 JSX에 포함됩니다.

 

 

St2veK: 쉽게 생각해서, 컴포넌트를 만들어내는 과정 자체는 JSX 코드라고 생각하면 될까?

 

 

GitHub Copilot: 네, 맞습니다. 쉽게 생각해서, 컴포넌트를 만들어내는 과정 자체는 JSX 코드라고 생각하면 됩니다. JSX는 JavaScript를 확장한 문법으로, React 컴포넌트의 UI를 정의하는 데 사용됩니다. JSX를 사용하면 HTML과 유사한 문법으로 React 컴포넌트를 작성할 수 있습니다.

예를 들어, 아래 코드는 JSX를 사용하여 Post 컴포넌트를 정의한 것입니다:

const Post = () => {
    return (
        <PostContainer>
            {
                [1, 2, 3, 4, 5].map((v, i) => {
                    return (
                        <PostItem key={i}>
                            <h2>TITLE BOI</h2>
                            <h3>Title description, Nov 21th, 2024</h3>
                            <FakeImg height="200">Image인척 해버리기</FakeImg>
                            <p>내용인 척 해버리기</p>
                            <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
                            <br />
                        </PostItem>
                    );
                })
            }
        </PostContainer>
    );
};

이 코드는 JSX를 사용하여 PostContainer 안에 여러 개의 PostItem 컴포넌트를 렌더링합니다. JSX 안에서 JavaScript 표현식을 사용하려면 중괄호 `{}`로 묶어야 합니다.