React 고난 #2

CoderS·2021년 12월 7일

JavaScript React 코딩

리액트 Remind

목록 보기

2/32

#2 외울게 많다 ㄷㄷㄷ!

JSX에서 Babel이란?

자바스크립트의 문법을 확장해주는 도구
지원하지 않는 최신 문법이나 실험적인 자바스크립트 문법들을 자바스크립트 형태로 변환해준다.

주의할 점!

알다시피 태그는 꼭 닫혀야한다.

예 ) 열려있는 div 태그

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
      <div>
    </div>
  );
}

export default App;

중간에 열려있는 div 태그가 존재한다.

결과는...

에러가 발생한다
이럴 때, 태그가 열려있으면 닫는 태그도 존재한다.

Self Closing 태그

태그와 태그 사이에 내용이 들어가지 않으면, self closing 태그를 사용하면된다. 열리고 바로 닫히는 태그를 의미한다.

예 ) <태그 />

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <input />
      <br />
    </div>
  );
}

export default App;

그리고 태그가 두 개 이상이면 무조건 하나의 태그로 감싸야한다.
대부분의 사람들은 div태그를 많이 사용한다.

예 ) 감싸지지 않았을 때

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello />
    <div>안녕히계세요.</div>
  );
}

export default App;

결과는...

에러가 발생한다.
이럴때는, 하나의 태그로 감싸준다.

예 )

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

하지만 불필요한 태그로 감싸는 것은 좋은 상황은 아니다. 특히 table 관련 태그를 div 태그로 감싸는 것은 좋은 행동은 아니다.

이럴 때, Fragment를 사용하면된다.

Fragment

Fragment는 비어있는 태그를 의미한다.

예 ) Fragment 태그

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

div로 묶어두지 않고, 빈 태그를 열고 닫았다.

결과는...

브라우저 상에서는 따로 특정 태그로 나타나지 않는다.

리액트에서 자바스크립트 값 사용하기

JSX에서 내부에 자바스크립트 변수를 삽입할 때, { } 중괄호로 감싸준다.

예 )

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

export default App;

리액트를 배우면서 중괄호를 엄청나게 많이 쓸 것이다.

style과 className

JSX에서는 스타일과 클래스네임을 설정할 때 HTML에서 한 것처럼 하면 안된다.

ex ) background-color => backgroundColor

이렇게 -으로 연결되어 있는 스타일들은 합쳐져서 camelCase 형태로 만들어야한다.

예 )

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

결과는...

div태그 안에 style을 바꿀때는, 중괄호로 열어야한다!

그리고, class를 설정할 때는, class=가 아닌 className=이라고 해주어야 한다.

예 )

App.js

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


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24,
    padding: '1rem'
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

App.css

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

App.js에서 두 번째 div태그안에 class를 className이라고 바꿨다.

결과는...

주석

JSX에서는 주석도 일반적으로 작성을하면은 안된다.

JSX 내부에서는 주석을 {/ 이런 형태로 /} 작성한다.

예 )

App.js

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


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;