💻 JSX 이해하기(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

근본적으로 JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐이다.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

위의 코드는 아래와 같이 컴파일됩니다.

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

React Element의 타입 지정하기

JSX 태그의 첫 부분은 React element의 타입을 결정한다.

대문자로 시작하는 JSX 태그는 React 컴포넌트를 지정한다. 이 태그들은 같은 이름을 가진 변수들을 직접 참조한다.

React가 스코프 내에 존재해야한다.

JSX는 React.createElement를 호출하는 코드로 컴파일 되기 때문에 React 라이브러리 역시 JSX코드와 같은 스코프 내에 존재해야 한다.

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

점 표기법을 사용해서 React 컴포넌트를 참조할 수 있다. 이 방법은 하나의 모듈에서 복수의 React 컴포넌트들을 export 하는 경우에 편리하게 사용할 수 있다.

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" />;
}

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

대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일되며 JavaScript 파일 내에 사용자가 정의했거나 import한 컴포넌트를 가리킨다.

실행 중에 타입 선택하기

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} />;

	// 아래처럼 변수에 지정해서 사용해야 한다.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

JSX 안에서의 prop 사용

JavaScript Expressions as Props

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

문자열 리터럴

// 동일한 표현
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

Props의 기본값은 “True”

// 동일한 표현
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

일반적으로 prop에 대한 값을 전달하지 않는 것을 권장하지 않는다고 한다.

속성 펼치기

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

// 동일한 표현
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

// 아래처럼도 사용 가능
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;

전개 연산자는 꼭 필요할 때만 사용하는 것을 권장한다. 불필요한 prop이나 유효하지 않은 HTML 속성들을 DOM에 넘기기도 하기 때문이다.

JSX에서 자식 다루기

여는 태그와 닫는 태그 사이의 내용은 props.children 이라는 특수한 prop으로 넘겨진다.

문자열 리터럴

<MyComponent>Hello world!</MyComponent>

여기서 MyComponent의 props.children은 ‘Hello world!’이다.

JSX를 자식으로 사용하기

JSX element를 자식으로 넘겨줄 수 있다.

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

또한 element로 이루어진 배열을 반환할 수 있다.

render() {
  // 리스트 아이템들을 추가적인 엘리먼트로 둘러쌀 필요 없습니다!
  return [
    // key 지정을 잊지 마세요 :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

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

// 동일한 표현
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

함수를 자식으로 사용하기

보통 JSX에 삽입된 JavaScript 표현식은 문자열, React element 혹은 이들의 배열로 환산된다. props.children은 다른 prop들과 마찬가지로 React가 렌더링 할 수 있는 데이터의 형태뿐만 아니라 어떤 형태의 데이터도 넘겨질 수 있다.

// 자식 콜백인 numTimes를 호출하여 반복되는 컴포넌트를 생성합니다.
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

boolean, null, undefined는 무시됩니다

// 동일하게 렌더링
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

React element들을 조건부 렌더링할 때 유용하다. 한가지 주의할 점은 0과 같은 falsy한 값들은 React가 렌더링 한다는 점이다.

// 아래 예시는 props.message가 배열일 때 0을 출력한다.
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

🔥 느낀점

전체적으로 복습하는 느낌으로 읽었고 하나 제대로 개념을 잡게 된 부분은 일반적으로 prop에 대한 값을 전달하지 않는 것을 권장하지 않는다는 부분이다. 그동안 true값 같은 경우는 prop값을 전달하지 않았던 경우가 있었는데 앞으로 인지하고 사용해야겠다.

Refer

• JSX이해하기 - React 공식문서