JSX

state & props

state

해당 컴포넌트에서 가지고있는 date를 의미한다.

---

props

부모로부터 전달 된 properties(속성)의 약자인 props이다.

JSX

자바스크립트 코드 위에서 간단하게 HTML처럼 할 수 있도록 만들어 진 것이 JSX이다.

---

🤗 HTML과 조금 다르게 알아둬야 할 것들

• className이라고 class를 지정해야 된다.
• onClick과 같이 대문자로 사용해야 된다.
• HTML은 마크업 언어, JSX는 자바스크립트 코드이다!
• JSX 코드 안에서 { } 괄호를 이용하면 자바스크립트 코드 작성을 할 수 있다.

import React from 'react';

function App() {
  const name = 'JY';
  return <h1>Hello! {name}</h1>
}

export default App;

---

⭐️ JSX는 다수의 태그들을 리턴할 수 없기 때문에 형제 노드가 있는 경우에는 하나의 태그로 묶어줘야 된다!

JSX에서의 자바스크립트 로직 구현

자바스크립트 코드와 함께 섞어서 사용할 수 있는데 아래의 코드처럼 사용할 수 있다!!!! 엄청나다 😆

import React from 'react';

function App() {
  const name = 'JY';
  const word = undefined;
  const myFruits = ['🍏', '🍊', '🍒', '🍇', '🍐', '🍉', '🍌', '🍋', '🍑', '🍅', '🍍', '🍓', '🍈'];

  return (
    <>
      <h1>Hello!</h1>
      {name && <h1>HoHo Hello React :) My name is ${name}</h1>}
      {word ? <h1>true</h1> : <h1>값이 없어요 :(</h1> }
      {myFruits.map((fruit) => <h2>{fruit}</h2>)}
    </>
  )
}

export default App;