본문 바로가기

[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL🚴‍♀️] CodingON

[react] JSX

JSX

javascript XLM = 데이터 저장, 전달할 목적으로 만들어진 언어

하나의 파일에 자바스크립트와 html 동시에 작성가능

	
<?xml version="1.0" encoding="UTF-8"?>
 
<programming_languages>
    <language>
        <name>HTML</name>
        <category>web</category>
        <developer>W3C</developer>
        <version status="working draft">5.1</version>
        <priority rating="1">high</priority>
    </language>
</programming_languages>

 

리액트 (src아래 app.js)

1. 리액트를 불러와서 사용할 수 있게 하는 코드

import React from 'react';

 

:프로젝트 생성과정에서 node_modules 디렉터리에 react 모듈이 설치, 따라서 import 구문을 이요해 리액트를 불러와서 사용

2. SVG 파일 및 SCC 파일 불러오기

import logo from './logo.svg';
import './App.css';

3. App이라는 컴포넌트 만들기 

	
function App() {
 return (
  <div className="App">
   <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
     Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
     className="App-link"
     href="https://reactjs.org"
     target="_blank"
     rel="noopener noreferrer"
    >
     Learn React
    </a>
   </header>
  </div>
 );
}

이때 function을 사용하여 컴포넌트를 만들었으므로 함수형 컴포넌트

: 프로젝트에서 컴포넌트를 렌더링할시, 함수에서 반환하고 있는 내용을 나타낸다. 

 

> src 폴더 내부 index.js 확인

리액트가 화면을 출력하는 코드는 ReactDON.render 부분

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

여기서 

    <App />
렌더링 시키는 부분이 App 컴포넌트이다.
 

JSX 사용규칙

1. 컴포넌트에 여러요소가 있을 시, 반드시 부모요소 하나로 감싸기

import React from 'react';
 
function App() {
 return (
  <div>
   <h1>리액트 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </div>
 );
}
 
export default App;

<div>로 감쌌다.

 

이유는?

VirtualDOM에서 컴포넌트 변화를 감지해내기 위해서. 

변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야함

 

만약 div 요소를 사용하고 싶지 않다면?

리액트v16이상부터 도입된 Fragment 기능 사용

	
import React, { Fragment } from 'react';
 
function App() {
 return (
  <Fragment>
   <h1>리액트 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </Fragment>
 );
}
 
export default App;

상단 import구문에서 react 모듈이 들어있는 Fragment 컴포넌트를 추가로 불러오게 된다.

 

 

2. 자바스크립트 표현식 작성시 JSX 내부에서 코드를 {}로 감싸기

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <>
   <h1>{name} 안녕!</h1>
   <h2>잘 작동하니?</h2>
  </>
 );
}
 
export default App;

 

3. JSX 내부의 자바스크립트 표현식에서, if문을 사용할 수 없다. 

BUT 조건에 따라 다른 내용을 렌더링 해야할 경우, JSX밖에서 if문을 사용하여 사전에 값을 설정하거나

{}안에 조건부 연산자 사용

(조건부 연산자 = 삼항 연산자)

	
import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <div>
   {name === "리액트" ? (
    <h1>리액트입니다.</h1>
   ) : (
    <h2>리액트가 아닙니다.</h2>
   )}
  </div>
 );
}
 
export default App;

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <div>
   {name === "뤼액트" ? (
    <h1>리액트입니다.</h1>
   ) : (
    <h2>리액트가 아닙니다.</h2>
   )}
  </div>
 );
}
 
export default App;

4. 특정조건을 만족할 때 내용 보여주기

(만족하지 않는 경우 아무것도 렌더링 X)

 

이때, 조건부 연산자를 통해 구현할 수 있다.

	
import React from 'react';
 
function App() {
 const name = "뤼액트";
 return <div>{name === "리액트" ? <h1>리액트입니다.</h1> : null}</div>;
}
 
export default App;

더 짧게 (&& 연산자 사용)

	
import React from 'react';
 
function App() {
 const name = "뤼액트";
 return <div>{name === "리액트" && <h1>리액트입니다.</h1>}</div>;
}
 
export default App;

 

&&연산자로 조건부 렌더링을 할 수 있는 이유 ?

리액트에서는 false를 렌더링할 경우, null과 마찬가지로 아무것도 나타내지 않기 때문이다.

 

주의!

falsy한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

 

5. 괄호() 사용법

주로 JSX를 여러 줄로 작성할 때는 괄호로 감싸고, 한줄로 표현할 수 있는 경우 감싸지 않는다. (필수가 아님)

(<div>Hello World</div>)

 

5 . 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황이 없어야 한다. 

// 오류 일으키는 코드 	
import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return name;
}
 
export default App;

그렇다면..?

어떤 값이 undefined일 수 있는 경우에는, OR (||) 연산자를 사용하여 

해당값이 undefined일 때 사용할 값을 지정하여 오류를 방지한다.

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return name || '값이 undefined입니다.';
}
 
export default App;

 

BUT!

JSX내부에서 undefined를 렌더링하는 것은 가능

	
import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return <div>{name}</div>;
}
 
export default App;

undefined일 때 보여주고 싶은 문구가 있다면?

import React from 'react';
import './App.CSS';
 
function App() {
 const name = undefined;
 return <div>{name || '리액트'}</div>;
}
 
export default App;

 

6. 리액트에서, DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌, "객체 형태"로 넣어준다

카멜표기법 사용하기

	
import React from 'react';
 
function App() {
 const name = "리액트";
 const style = {
  backgroundColor: "black",
  color: "aqua",
  fontSize: "48px",
  fontWeight: "bold",
  padding: 16
 };
 
 return <div style={style}>{name}</div>;
}
 
export default App;

다음과 같다.

import React from 'react';
 
function App() {
 const name = "리액트";
 return (
  <div 
   style={{
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16
   }}
  >
   {name}
  </div>
 );
}
 
export default App;

 

7.  일반 HTML에서 CSS 클래스 사용시 class라는 속성을 주는 것과 달리,

JSX에서는 "className" 으로 설정한다

 

// src / App.css
.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

 

App.js

	
import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return <div className="react">{name}</div>
}
 
export default App;

 

8. JSX에서는 <br>, <input>처럼 코드를 닫지 않고 작성시 오류가 생긴다.

</> 꼭 닫기!

import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return (
  <>
   <div className="react">{name}</div>
   <input></input>
  </>
 );
}
 
export default App;

이렇게 작성하거나,

	
import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return (
  <>
   <div className="react">{name}</div>
   <input />
  </>
 );
}
 
export default App;

이렇게 닫는 것을 self-closing 태그라 하며 

태그를 선언하면서 동시에 닫을 수 있는 태그이다.

 

 

9. JSX 안에서 주석 

import React from 'react';
import './App.css';
 
function App() {
 const name = "리액트";
 return (
  <>
   {/* 주석은 이렇게 시작합니다!! */}
   <div
    className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수도 있습니다.
   >
    {name}
   </div>
   // 하지만 이런 주석이나
   /* 이런 주석은 페이지에 그대로 나타나게 됩니다. */
   <input />
  </>
 );
}
 
export default App;

 

실습하기

 

변수선언

import React from 'react';

function App() {
  const name = '초바비';
  const animal = '고양이';


  return (
    <div>
      <h2>
        제 반려동물의 이름은 {name} 입니다! <br />
        {name}는 {animal} 입니다.
      </h2>
    </div>
  );
}

export default App;

 

삼항연산자

import React from 'react';

function App() {
  let a = 3;
  let b = 5;
  const value = a + b;
  return (
    <div>{value === 8 ? <h1> 정답입니다! </h1> : <h2> 오답입니다! </h2>}</div>
  );
}

export default App;

&& 연산자

import React from 'react';

function App() {
  let a = 7;
  let b = 5;
  // const value = a + b;
  return <div>{a > b && <h1> a가 b보다 큽니다 </h1>}</div>;
}

export default App;

 

컬러 및 정렬하기

//css

//추가

.test {
  text-align: center;
  color: brown;
  background-color: rgb(255, 222, 183);
  /* font-weight: bold; */
  font-size: 50px;
}

.input {
  align-items: center;
  text-align: center;
  margin: 20px;
}

//app.js

import React, { Fragment } from 'react';
import './App.css';

function App() {
  const title = 'Hello, SESAC!';
  return (
    <Fragment>
      <div className="test">{title}</div>
      <br />
      <div style={{ textAlign: 'center' }}>
        아이디:<input className="input"></input>
        <br />
        비밀번호:<input className="input"></input>
      </div>
    </Fragment>
  );
}

export default App;

app.css 에 클래스 줘서 무지개 만들기, float 쓰기

//app.css

.red {
  background-color: red;
  width: 100px;
  height: 100px;
  float: left;
}

.orange {
  background-color: orange;
  width: 100px;
  height: 150px;
  float: left;
}

.yellow {
  background-color: yellow;
  width: 100px;
  height: 200px;
  float: left;
}

.green {
  background-color: green;
  width: 100px;
  height: 250px;
  float: left;
}

.blue {
  background-color: blue;
  width: 100px;
  height: 300px;
  float: left;
}

.navy {
  background-color: navy;
  width: 100px;
  height: 350px;
  float: left;
}

.purple {
  background-color: purple;
  width: 100px;
  height: 400px;
  float: left;
}

 

app.js

import React, { Fragment } from 'react';
import './App.css';

function App() {
  return (
    <Fragment>
      <div className="red"></div>
      <div className="orange"></div>
      <div className="yellow"></div>
      <div className="green"></div>
      <div className="blue"></div>
      <div className="navy"></div>
      <div className="purple"></div>
    </Fragment>
  );
}

export default App;