JSX

JSX

• 함수로 만들어진 위 컴포넌트들이 HTML 태그를 사용하듯이 코드를 작성하는 방식

  ---

할아버지-엄마-자식 컴포넌트를 만들어 보기

function Child() {
  return <p>나는 자식입니다. 연결성공</p>;
}
function GrandFather() {
 return <Mother />
}

function Mother() {
  return <Child />
}

function App() {
  return <GrandFather />
}

---

JSX는 1개의 Element만 반환할 수 있다.

 
function App() {
  return 
  <p>이렇게 두개의 엘리먼트를</p>
  <div>넣으려고 하면 에러가 납니다.</div>
}

---

JSX에서 자바스크립트를 사용하려면 "반드시" 중괄호를 써야한다. 그렇지 않으면 단순 문자열로 인식이 된다.

function App() {
  const cat_name = 'perl';

  return <div>hello {cat_name}!</div>;
}

삼항연산자를 쓸 때도 중괄호로 적용을 할 수 있다.

function App() {
  const number = 3;
  return (
    <div>
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* 리액트에서 주석 사용하기. 중괄호 안에 주석을 작성할 수 있어요. */}
      <p>
        {number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다'}
      </p>
    </div>
  );
}

---

클래스는 className 으로 작성해야 한다.

<p className='name'>나는 이름입니다.</p>

---

HTML 태그에 inline style을 적용할 수 없다.

inline처럼 적용하려면 return 위에 json 형식으로 입력해주어야 한다.

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  }
  return (
      <p style={styles}>안녕하세요! 리액트 반입니다 :)</p>
  );
}