JSX - HTML with JS

JSX는 리액트의 컴포넌트를 만드는데 아주 유용한 문법
최상위 컴포넌트를 정의할 수 있으며, 관례상 최상위 부모가 되는 컴포넌트를 App이라고 부른다. 

 

MyHeader.js 파일 생성

헤더가 들어온걸 확인할 수 있다. 

 

여기에 컴포넌트 Myfooter.js를 하나 더 생성한다. 

만들고 App.js의 App함수의 자식으로 추가해주면, 

myfooter를 확인할 수 있다.

 

또한, JSX 컴포넌트를 만들어서 리턴하려면, 반드시 하나의 최상위 태그로 다른 태그들을 묶어줘야 한다. 

만약 최상위 태그로 안묶고 싶다면, React.Fragment를 이용해서 묶어줄 수 있는데, 이를 사용하기 위해 

import React from 'react';를 선언해줘야 한다. 

최상위 태그를 두고싶지 않은 것을 감싸주면 된다. 만약 이게 귀찮으면, 통째로 비워서 빈 태그를 만들어도 문제가 되지 않는다. 

또한, Myfooter, MyHeader에서는 React를 import하지 않았는데 React의 기능을 이용하지 않으면 굳이 안해도 괜찮다. 

 

 

 

<JSX 문법으로 작성한 태그들과 CSS의 결합>

리액트 컴포넌트에서는 import 키워드와 경로를 사용하여 css를 불러다가 사용하고, css요소들이 적용된다. 

 

<변경한 css파일을 적용해보자>

<인라인 스타일링 방식도 있다> -> import "./App.css"; 주석 처리 

 

import React from 'react';
// import './App.css';
import MyHeader from './MyHeader';

const style = {
  App: {
    backgroundColor : "black",
  },
  h2 : {
    color : "red",
},
  bold_text:{
    color : "green",
  },
};

function App() {
  return (
  <div style={style.App}>
    <MyHeader />
       <h2 style={style.h2}>안녕 React</h2>
       <b style={style.bold_text} id = 'bold_text'>React.js</b>
    </div>
  );
}

export default App;

<결과>

import React from 'react';
// import './App.css';
import MyHeader from './MyHeader';

const style = {
  App: {
    backgroundColor : "black",
  },
  h2 : {
    color : "red",
},
  bold_text:{
    color : "green",
  },
};

const number = 5; 

function App() {
  return (
  <div style={style.App}>
    <MyHeader />
       <h2 style={style.h2}>안녕 React</h2>
       <b style={style.bold_text} id = 'bold_text'>
       {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
       </b>
    </div>
  );
}

export default App;

이런 식으로 조건에 따라 다르게 랜더링이 가능하게도 수정 가능  --> *조건부 랜더링*