리액트 기초 - JSX소개

const element = <h1>Hello, world!</h1>;

위는 JSX라 불리는, javascript를 확장한 문법입니다.

문자열도 아니고, HTML태그도 아닙니다.

JSX라고 보시면 되겠습니다.

 

1. JSX란?

"마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로..."

(출처: https://ko.reactjs.org/docs/introducing-jsx.html)

 

 

2. JSX에 표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez',
};
//여기까지는 컴포넌트라고 부를 수 없다.

const element = <h1>Hello, {formatName(user)}!</h1>;
//JSX문법에 {}안에 JS 문법을 넣고 있다.

ReactDOM.render(element, document.getElementById('root'));

//ReactDOM의 render메소드는, 매개변수로써 JSX와 HTML의 JS DOM을 잡는다.

JSX는 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

 

 

3. JSX 속성 정의

속성에 따옴표를 이용해여 문자열 리터럴을 정의할 수 있습니다.

const element = <div tabIndex="0"></div>;

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

 

4. JSX로 자식 정의

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

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);