React #1 - JSX

React #1

---

JSX란?

JavaScript를 확장한 문법이고, React와 함께 사용할 것을 권장한다고 한다. Vue를 공부하던 사람은 React의 방식인 JavaScript 코드 안에서 UI 코드를 작업하는 게 익숙하지 않을 것이다. 물론 나도 Vue를 먼저 공부했기에 익숙하지가 않다.. ㅎ 그런데 이러한(JavaScript 코드 안에 UI 관련 작업) 방식이 시각적 그리고 에러 및 경고 메시지도 좀 더 직관적으로 표시한다고 한다. 

---

 

JSX에 표현식 포함하기

const playerName = 'Son';
const element = <h1>EPL Best Player, {value}</h1>;

 

함수 호출

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

const player = {
  firstName: 'Son',
  lastName: 'Heung Min'
};

const element = (
  <h1>
    EPL Best Player, {formatName(user)}!
  </h1>
);

 

• playerName 변수를 선언하여 JSX 안에 사용 
• JSX 중괄호 안에 모든 JavaScript 표현식을 넣을 수 있다. 

 

function getValue(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, ifOutside.</h1>;
}

 

• 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다.
• JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

 

속성정의

const element = <a href="https://www.naver.com"> link </a>;

 

• 문자열 리터럴을 정의 할 수 있다.

 

const element = <img src={data.url}></img>;

 

• JavaScript 표현식을 넣을 수 있다.

 

객체 생성

const element = React.createElement(
  'h1',
  {className: 'firstClass'},
  'Hello, Son!'
);

 

• React.createElement()는 위에 " 시각적 그리고 에러 및 경고 메시지도 좀 더 직관적으로 표시한다"라고 설명했듯이 객체를 생성하기 전에 버그가 없는 코드인지 검사를 수행한다.

 

 

참조 : https://ko.legacy.reactjs.org/docs/introducing-jsx.html