개발지식/React

JSX가 뭐야

jinux127 2022. 4. 15. 00:29

JSX는 React.createElement(component, props, ...chilred) 함수에 대한 문법적으로 도와줄 뿐 이다.

JSX 타입

1. JSX 타입을 위한 점 표기법 사용

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

만약 하나의 모듈에서 여러 개의 컴포넌트들을 export한 경우 점 표기법을 편리하게 사용할 수 있다.

2.사용자 정의 컴포넌트는 반드시 대문자로 시작해야한다.

소문자로 시작하는 경우는 내장 컴포넌트

나 등 이고 'div'와 같은 문자열 형태로 createElement에 전달된다. 와 같이 대문자로 시작하는 타입들은 React.create(Foo)의 형태로 컴파일된다. 이는 Javascript파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킨다.

  import React from 'react';

// 올바른 사용법입니다. 아래는 컴포넌트이므로 대문자로 시작해야 합니다.
function Hello(props) {
  // 올바른 사용법입니다! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효합니다.
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 올바른 사용법입니다! React는 <Hello />가 대문자로 시작하기 때문에 컴포넌트로 인식합니다.
  return <Hello toWhat="World" />;
}

3.실행 중에 타입 선택하기

React.element 타입에 일반적인 표현식은 사용할 수 없다. element 타입을 지정할 때 일반적인 표현식을 사용하고자 한다면 대문자로 시작하는 변수에 배정한 후 사용할 수 있다.

  import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 잘못된 사용법입니다! JSX 타입은 표현식으로 사용할 수 없습니다.
//  return <components[props.storyType] story={props.story} />;

  // 올바른 사용법입니다! 대문자로 시작하는 변수는 JSX 타입으로 사용할 수 있습니다.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

위의 예시를 살펴보자

잘못된 사용법은 React element 타입에 표현식을 사용하였다. 이는 잘못된 사용법으로 대문자로 시작하는 변수에 배정한 후 에 사용하는 것이 올바른 방법이다.

JSX prop 사용

1. JavaScript Expressions as Props

아래의 예시와 같이 JavaScript 표현을 {} 안에 넣어서 JSX 안에서 prop으로 사용할 수 있습니다.

<MyComponent foo={1 + 2 + 3 + 4} />

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 안에서 그대로 사용할 수 없습니다. 하지만 아래의 예시와 같이 JSX 밖의 주변 코드에서 사용할 수 있습니다.

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

2. 문자열 리터럴

문자열 리터럴은 prop으로 넘겨줄 수 있다. 

      <MyComponent message="hello world" />

    <MyComponent message={'hello world'} />

3. Props의 기본값

Prop에 어떤 값도 넘기지 않을 경우 기본값은 true이다.

    <MyTextBox autocomplete />

    <MyTextBox autocomplete={true} />

4. 전개 연산자로 전달

props에 해당하는 객체를 이미 가지고 있다면 전개연산자로 전체 객체를 그대로 넘겨줄 수 있다.


  function App1() {
      return <Greeting firstName="Ben" lastName="Hector" />;
  }

  function App2() {
    const props = {firstName: 'Ben', lastName: 'Hector'};
    return <Greeting {...props} />;
  }

아래 예시를 보자 

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

먼저 앱의 Button 컴포넌트의 props으로 kind와 onClick이 전달되고 Button의 kind prop으로 클래스를 정하고 나머지는 전개연산자로 모든 것을 넘겨주어 유연하게 만들어주는 것을 볼 수 있다.

하지만 전개연산자는 불필요한 prop을 컴포넌트에 넘기거나 유효하지 않은 HTML 속성들을 DOM에 넘기기도 하니 주의하는 것이 좋다.

JSX에서 자식 다루기

여는 태그와 닫는 태그가 있는 JSX 표현에서 두 태그 사이의 내용은 props.children이라는 특수한 prop으로 넘겨진다.

1. 문자열 리터럴

여는 태그와 닫는 태그 사이에 문자열 리터럴을 넣을 수 있음.

JSX는 각 줄의 처음과 끝에 있는 공백을 제거

2. JSX를 자식으로 사용하기

3. JavaScript 표현식을 자식으로 사용하기

4. 함수를 자식으로 사용하기

5.boolean, null, undefined는 무시