JSX 1

JSX란?

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 

React는 JSX 사용이 필수는 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

 

JSX에 표현식 포함하기

const name = '개철';
const element = <h1>Hello, {name}</h1>;

위의 코드와 같이 변수를 선언 한 후 변수를 다시 불러 올 때는 중괄호'{}' 로 감싸 사용할 수 있다.

뿐만 아니라 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다. 예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식이다.

 

예를 들어

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

const user = {
  firstName: '개철',
  lastName: '김'
};

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

위와 같이 함수의 호출을 통해 반환된 값을 표현할 수도 있다.

 

또한 JSX는 그 자체로 표현식이된다. 이게 무슨말인고 하니 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.

즉, JSX를 사용할 때 if문이나 for문 등의 안에서 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.

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