JSX (JavaScript XML)

JSX란 JavaScript 확장 문법으로, React에서 UI를 작성할 때 사용됩니다.
React에서 JSX를 사용하면, 더욱 직관적이고 가독성이 좋은 코드를 작성할 수 있습니다.
또한, React 컴포넌트 내에서 HTML과 JavaScript 코드를 함께 작성할 수 있어서, 코드의 유지보수가 용이해집니다.
React_JSX는 React에서 UI를 작성하는 데 필수적인 기술 중 하나이며, React를 학습하고 개발하는 데 있어서 중요한 개념입니다.

return 구문에 작성한 게 JSX 문법

JSX의 기본 작성규칙

JSX에서는 HTML 태그와 함께 JavaScript 표현식을 함께 사용할 수 있습니다.
이를 위해서는 JSX에서는 JavaScript 표현식을 중괄호( { } )로 감싸주어야 합니다.

const name = "React";
const element = <h1>Hello, {name}!</h1>;

위 코드에서는, name 이라는 변수를 선언하고, element 라는 변수에 HTML 태그와 함께 중괄호를 사용하여 name 변수를 출력하도록 했습니다.
이렇게 하면, element 변수가 HTML 태그와 함께 출력되는 동시에, {name} 부분은 React 라는 문자열로 대체되어 출력됩니다.

JSX에서는 HTML 태그의 속성값에도 JavaScript 표현식을 사용할 수 있습니다. 이때, 속성값에 JavaScript 표현식을 사용할 경우, 속성값을 중괄호로 감싸주어야 합니다.

const element = <img src={user.avatarUrl} />;

위 코드에서는, img 태그의 src 속성값에 user.avatarUrl 변수를 사용하도록 했습니다. 이때, src 속성값을 중괄호로 감싸주어야만 한다는 것에 주의해야 합니다.

const element = <div className="container">Hello, World!</div>;

위 코드에서는, div 태그를 사용하여 Hello, World! 라는 텍스트를 출력하도록 했습니다. 이때, div 태그의 속성으로 className 을 사용하여 CSS 클래스를 지정하였습니다.

JSX 작성 방법 응용편

JSX에서는 다양한 방법으로 JavaScript 표현식을 사용할 수 있습니다.
이번에는 JSX 작성 방법을 응용하여 다양한 UI 요소를 작성해보겠습니다.

1. 조건문과 반복문 사용하기

JSX에서는 JavaScript의 조건문과 반복문을 사용하여 동적인 UI를 만들 수 있습니다.

src/exam/Exam6.js

• 조건문

// JSX(JavaScript Xml) 사용하기
// 컴포넌트 안에서 자유롭게 return 구문 안에 JSX 문법 작성 가능

// 조건문
function Exam6_1(props) {
    // 부모가 넘겨준 값 매개변수로 받기
    const isLogin = props.isLogin;
    // 부모에게 전달받은 props 중 isLogin 값을 변수에 담아둠
    // 안에는 true 라는 값이 들어있음
    // true 인지 false 인지에 따라서 화면을 다르게 띄워줄 거
    if(isLogin) {
        return <h1>Welcome back!</h1>
    } else {
        return <h1>Please sign up~!</h1>
    }

}

export default Exam6_1; // 기본적으로 내보내는 컴포넌트가 Exam6_1 이다.

return 값 안에서 JSX 문법 한줄로 작성하기

    return (
        // 렌더링 시 조건문
        // if / else 지양
        // -> 삼항 연산자
        // 조건문(boolean) ? true 일 때 값 : false 일 때 값
        isLogin ? <h1>Welcome back!</h1> : <h1>Please sign up~!</h1>
    );

출력 결과 같음

App.js

import logo from './logo.svg';
import './App.css';
import Exam6_1 from './exam/Exam6';

// 터미널 ctrl + shift + \` (백틱)으로 열고
// 터미널에서 yarn start 서버 켜기
// 터미널에서 ctrl + c 서버 끄기

function App() {
  return (
    <div className='App'>

      {/* 파일명을 작성하는 게 아닌 컴포넌트명 작성해줘야함 */}
      <Exam6_1 isLogin={false}/>
      {/* App() 이 Exam6_1 컴포넌트의 부모 */}
      {/* 부모가 Exam6_1 한테 props 속성을 줄 거임 isLogin이라는 이름으로 true boolean 값 전달 */}
      {/* -> 부모가 Exam6_1 을 부를 때 isLogin이라는 이름의 props 를 줌 */}
      {/* Exam6_1 컴포넌트는 부모가 넘겨준 props 를 받을 준비를 해야함 */}

      {/* div 에 className='App' 작성하면 가운데 정렬됨 */}
    </div>
  );
}

export default App;

위 코드에서는, Exam6이라는 컴포넌트를 정의하고, isLogin 이라는 props를 전달하도록 했습니다.
Exam6 컴포넌트 내에서는 isLogin값이 true 인 경우, Welcome back!이라는 텍스트가 출력되고, isLogin 값이 false 인 경우, Please
sign up.이라는 텍스트가 출력됩니다.

• 반복문
  Exam6.js

// map (반복문) 사용법
// React 에서는 javaScript에 map 이라는 내장 함수를 자주 사용함
export function Exam6_2() {
    // Exam6_2 도 App.js 로 내보내고 싶은데 export default 는 값을 하나밖에 못 씀
    // => 컴포넌트 앞에 export 붙여주면 됨
    // 호출할 때 App.js 에서 import 구문에 default 값 뒤에 , { Exam6_2 } 작성해주면 됨

    // java의 map 과 다름 java map 은 컬렉션 key : value
    // map() : 배열에서 사용하는 js 내장 함수
    // -> 배열의 모든 요소에 대해 주어진 함수를 호출하고
    //    함수를 적용한 결과를 새로운 배열로 반환하는 함수
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) => <li>{number}</li>);
    // return 구문이 한줄 일때는 대괄호 없이 써도 됨
    // 배열의 모든 요소에 대해 안에 주어진 익명함수를 적용한 결과를 호출해서 돌려줌
    // [ <li>1</li>, <li>2</li>, <li>3</li>, <li>4</li>, <li>5</li> ]
    // => 새로운 배열로 listItems 안에 들어가져 있는 것
    // <li> 태그 안에 각각 1~5까지 값이 들어가있다.

    return <ul>{listItems}</ul>

}

App.js

import Exam6_1, {Exam6_2} from './exam/Exam6';

function App() {
  return (
    <div className='App'>

      <Exam6_1 isLogin={true}/>

      <Exam6_2 />

    </div>
  );
}

export default App;

위 코드에서는, numbers 라는 배열을 정의하고, map 함수를 사용하여 listItems 라는 배열을 생성하였습니다. listItems 배열을 ul 태그 내부
에 출력하면, 1 , 2 , 3 , 4 , 5 라는 숫자 리스트가 출력됩니다.

Exam6_2 컴포넌트 안에 number에 +1 한 경우

const listItems = numbers.map((number) => <li>{number + 1}</li>);

map() 내장 함수는 React 에서 렌더링할 때 JSX 문법에서 자주 사용됨

2. 이벤트 처리하기

JSX에서는 HTML 태그와 마찬가지로 이벤트를 처리할 수 있습니다.
Exam6.js

// 이벤트 처리하기
export function Exam6_3(props) {

    // 버튼이 클릭 됐을 때 일어날 함수를 호출한 다음
    // 호출된 함수가 어떻게 동작할지 정의해줌
    const handleClick = () => {
        alert('버튼 클릭되었음!');
    }

    // 화면에 렌더링할 걸 return 구문 안에 작성
    return (
        <button onClick={handleClick}>{props.label}</button>
    );
}

주의사항

React에서 함수형 컴포넌트를 작성할 때, 컴포넌트가 반환하는 JSX 요소는 단 하나의 최상위 요소로 감싸져 있어야 합니다. 이는 JSX에서 여러 요소를 반환할 경우 발생할 수 있는 문제를 방지하기 위함입니다.
이유는 React가 컴포넌트를 렌더링할 때, 컴포넌트가 반환하는 JSX 요소가 하나의 최상위 요소로 감싸져 있지 않으면, 렌더링이 실패할 수 있기 때문입니다. 따라서, 여러 요소를 반환해야 하는 경우에는, 하나의 최상위 요소로 감싸주어야 합니다.
App.js

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to my app.</p>
    </div>
  );
}

위 코드에서는, div 태그를 사용하여 h1 태그와 p 태그를 감싸주었습니다. 이렇게 하면, 함수형 컴포넌트가 반환하는 JSX 요소가 하나의 최
상위 요소로 감싸져 있으므로, 렌더링이 정상적으로 수행됩니다.