해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

---

JSX의 특징

다른 속성명 class vs className

// HTML
<h1 class="big">Hey</h1>

// JSX
<h1 className="big">Hey</h1>

JSX에선 camelCase로 된 className 속성을 써야함

Self-closing Tags

JSX에선 self-closing tag의 경우 항상 < /> 슬래시 사용해야함

---

JSX의 JavaScript

무조건 {} 사용

ReactDOM.render(
  <h1>2 + 3</h1>,
  document.getElementById('app')
);
// Output: 2 + 3

ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);
// Output: 5

JSX 문법 내부에서 변수를 불러오고 싶을 때에도 {}

// Declare a variable:
const name = 'Gerdo';
 
// Access your variable 
// from inside of a JSX expression:
const greeting = <p>Hello, {name}!</p>;

JSX요소의 속성값으로도 {} 사용

const sideLength = "200px";
 
const panda = (
  <img 
    src="images/panda.jpg" 
    alt="panda" 
    height={sideLength} 
    width={sideLength} />
);

// 객체의 경우에도
const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
}; 
 
const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);

---

JSX와 Event Listener

https://reactjs.org/docs/events.html#supported-events

on***의 형태로 요소의 속성으로 들어감

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}
 
<img onClick={myFunc} />

function makeDoggy(e) {
  e.target.setAttribute('src', 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

const kitty = (
	<img 
		src="https://content.codecademy.com/courses/React/react_photo-kitty.jpg" 
		alt="kitty" 
    onClick={makeDoggy}
    />
);

e = kitty가 되고, setAttribute를 통해 속성이 변함

---

JSX와 조건문

🔥 JSX의 {}에는 if문을 넣을 수 없음!!

1. JSX 밖에 조건문을 넣는다

function coinToss() {
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

let img;

if (coinToss() === 'heads') {
  img = <img src={pics.kitty} />;
} else {
  img = <img src={pics.doggy} />;
}

ReactDOM.render(img, document.getElementById('app'))

렌더될 대상인 img 요소는 그냥 선언만 해두고, jsx 밖의 조건문을 만들어 img 변수를 조작

2. 삼항 조건 연산자

x ? y : z

• x: truthy / falsy로 도출될 조건
• y: truthy일 경우 리턴값
• z: falsy일 경우 리턴값

삼항연산자는 JSX안에 사용할 수 있음!!!

const headline = (
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

3. && 연산자

어떨 때는 실행이 되고, 어떨 때는 아무것도 안일어나도록 하는 조건문에서 많이 사용

{ 조건 && 렌더링 할 요소 }

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

---

JSX에서 .map사용

한 array에 담긴 값들로 여러개의 JSX 요소를 만들 때 사용

const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

그러면 listItems 값은 배열로 도출되지만, JSX에선 배열도 제대로 렌더링 할 수 있음.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
 
// 위랑 아래랑 똑같은 결과
 
const liArray = [
  <li>item 1</li>, 
  <li>item 2</li>, 
  <li>item 3</li>
];
 
<ul>{liArray}</ul>

keys

무언가의 리스트, 배열이 있을 때 JSX에서는 key 속성이 필요함.

<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>
</ul>

역할이 있는건 아니지만, React가 내부적으로 리스트 요소를 트래킹하는 데에 사용.

아래의 경우 key가 필요함

1. 리스트의 아이템이 매 렌더링마다 기억해야할 메모리가 있는 경우
   (ex. 체크리스트의 경우 - 체크 여부)
2. 리스트의 순서가 뒤죽박죽 될 수 있을 경우

// map의 index 인자를 이용하여 쉽게 key 만들기
const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, i) => <li key={'person_' + i}>{person}</li>);

React.createElement

JSX없이 리액트 코드를 쓸 수 있음

const h1 = <h1>Hello world</h1>;

JSX로 만든 이 코드는

const h1 = React.createElement(
	"h1",
  	null,
  	"Hello world"
 );

이렇게 컴파일 됨. React.createElement라는 메소드로!