JSX 이해하기

jsx가 컴파일 된 코드

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

컴파일 후

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

React Element의 타입 지정하기

React가 스코프 내에 존재해야 합니다

jsx는 React.createElement를 호출하는 컴파일 되어서 import React from 'react';를 작성해야 합니다.

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null);
return ;
}

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

요소의 이름이 소문자로 시작하면 내장 컴포넌트라는것을 의미한다

ex) <div>, <span>

요소의 이름이 대문자로 시작하면 React.createElement(Foo)의 형태로 컴파일 되고 사용자가 정의하였거나 import한 컴포넌트를 의미 하게 된다.

JSX 안에서의 prop 사용

{}안에서 표현식을 작성하기

문자그대로 {}안에서 javascript 표현식을 작성하는 방법이 있습니다.

아래의 foo prop에는 10이 들어가게 됩니다.

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

문자열 리터럴

아래 모두 동일한 표현식입니다.

<MyComponent message="hello world" />

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

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

props의 기본값은 true

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

전개 연산자로 prop 넘기기

아래 두 컴포넌트는 동일합니다

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

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

아래의 예시처럼 현재 컴포넌트에서 사용할 prop과 자식컴포넌트로 넘겨줄 prop을 전개 연산자로 분리하여 사용할 수도 있습니다.

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

JSX에서 자식 다루기

문자열 리터럴

아래의 props.children은 Hello world!가 됩니다.

<MyComponent>Hello world!</MyComponent>

jsx는 기본적으로 공백을 제거하는데, 이때 제거되는 공백은 다음과 같습니다.

1. 각줄의 처음과 끝 공백
2. 빈줄
3. 태그에 붙어있는 개행, 리터럴 중간의 개행은 하나의 공백으로 바뀜

아래 요소들은 모두 똑같이 렌더링 됩니다.

<div>Hello World</div>

<div>
  Hello World
</div>

<div>
  Hello
  World
</div>

<div>

  Hello World
</div>

JSX를 자식으로 사용하기

어떠한 컴포넌트의 props로 JSX 요소를 넘겨 줄 수도 있습니다.

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

마찬가지로 JavaScript 표현식도 props로 넘길 수 있습니다

함수를 자식으로 사용하기

props.children으로 어떠한 형태의 데이터도 넘길 수 있기 때문에

아래와 같이 함수를 통째로 props.children으로 넘길 수 있습니다.

// 자식 콜백인 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는 무시됩니다.

아래의 코드 모두 동일하게 렌더링 됩니다. 모두 유효한 jsx 문법이며

다만 렌더링 되지 않을 뿐입니다.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

falsy값은 그대로 렌더링이되므로 아래와 같이 진리값을 출력하도록 해야합니다.

❌

//props.messages.length가 빈배열이면 0을 출력 
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

🆗

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>