React JSX와 조건부 렌더링

JSX(JavaScript XML)

1. JSX란?

• React에서 사용되는 Javascript에 XML을 추가한 확장한 문법코드
• 실행하기 전 브라우저가 읽을 수 있도록 Babel을 이용해 javascript 코드 변환해야 한다.

// Javascript code
return React.createElement(
	'div',
	{
		onClick: () => setFollowing(!following),
		style : following ? followBtnStyle : followingBtnStyle
	},
	following ? 'following' : 'Follow'
);

 // JSX code
return(
	<div
		onClick = {() => setFollowing(!following)}
		style = {following ? followBtnStyle : followingBtnStyle}
	>
		{following ? 'following' : 'Follow'}
	</div>
);

2. JSX에 표현식 포함하기

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

function App() {
  const message = 'Learn React';
  const formatName = (user) => {
    return `Hello, ${name}!! Learn React`;
  };
  return (
    <div className="App">
    	{message}
        {formatName('yeahzing')}
	</div>
  );
}

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

function App() {
  const getGreetingMessage = (name) => {
    if( name === 'yeahzing') return `Hello, ${name}!! Learn React`;
    return `Welcome, ${name}!! Learn React`;
  };
  return (
    <div className="App">
      {getGreetingMessage('yeahzing')}
    </div>
  );
}

3. JSX 속성 정의

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수 있다.

function App() {
  const logo = './logo.svg';
  return (
    <div className="App">
    	<img src={logo} />
	</div>
  );
}

JSX는 HTML보다는 JavaScript에 가깝기 때문에,
React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 된다.
ex. class 와 for 같은 JavaScript 예약어는 class → className, for → htmlFor 로 사용

4. JSX로 자식 정의

태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아주어야 한다.

const element = <img src={user.avatarUrl} />;
function App() {
  const logo = './logo.svg';
  return (
    <div className="App">
    	<input type="checkbox" />
    	<p className="aaa" />
	</div>
  );
}

---

조건부 렌더링

Type 1

function App() {
  const getGreetingMessage = (name) => {
    if( name === 'yeahzing') return `Hello, ${name}!! Learn React`;
    return `Welcome, ${name}!! Learn React`;
  };
  return (
    <div className="App">
      {getGreetingMessage('yeahzing')}
    </div>
  );
}

Type 2 : if-else 삼항 연산자

function App() {
  const name = 'yeahzing';
  return (
    <div className="App">
      {name === 'yeahzing' ? `Hello, ${name}!! Learn React` : `Welcome, ${name}!! Learn React`}
    </div>
  );
}

Type 3 : if 논리 연산자

function App() {
  const name = 'yeahzing';
  return (
    <div className="App">
      {name === 'yeahzing' && `Hello, ${name}!! Learn React`}
      // A === A && expression
      // 조건이 true일 경우 : && 이후에 위치한 expression 반환
    </div>
  );
}

단, falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다.

function App() {
  const count = 0;
  return (
    <div className="App">
      {count && <h1>Messages: {count}</h1>}		// output : 0
      // falsy 표현식이 안 나오게 하려면
      // count 앞에 !or !!을 넣어 Boolean 값으로 명확하게 바꿔서 사용
      // count → 0, !count → true, !!count → false
      {!!count && <h1>Messages: {count}</h1>}	// output :
    </div>
  );
}

++ 값이 없을 때 다른 텍스트는 보여주고 싶을 때

function App() {
  const memo = '';
  return (
    <div className="App">
      {memo && `메모: ${memo}`}			// 아무것도 안 뜸
      {memo !== null && `메모: ${memo}`}	// '메모: ' 라고 뜸
    </div>
  );
}