[Javascript] JSX 기본 문법

 

0. React 시작

 

• 리액트 시작하기 링크: Tutorial: Intro to React
• Node JS 설치: https://nodejs.org/ko/
• 리액트 설치: https://reactjs-kr.firebaseapp.com/docs/installation.html

 

 

---

1. return할 때 하나의 DOM만 리턴할 수 있다.

 

아래 코드를 보자. return 안에 div 태그로 묶여있는 것을 확인할 수 있다. return되는 DOM이 1개이다.

html 파일에 전달하면 div태그의 내용이 정상적으로 출력될 것이다.

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

function App() {
  return (
    <div>
      this is react program
      <h1>Title</h1>
      <hr/>
    </div>
  );
}

export default App;

 

 

오류의 예시

아래의 코드는 div 태그, h1 태그, hr 태그 3개의 DOM이 묶여있지 않고 독립적으로 존재한다.

return할 때 1개의 DOM만 리턴할 수 있기 때문에 오류가 발생한다.

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

function App() {
  return (
    <div>this is react program</div>
    <h1>Title</h1>
    <hr/>
  );
}

export default App;

 

 

 

---

2. 자바스크립트 변수 사용하기

 

• var보다는 let과 const를 사용하자.

var은 적용 범위(Scope)가 넓다. 어떤 함수 안에서 var을 통해 변수를 선언하면 그 함수 밖에서도 변수를 사용할 수 있어 프로그램에 혼란을 줄 수 있다. 블록 스코프의 범위를 가진 지역 변수를 선언하는 let을 사용하거나 상수를 선언하는 const를 사용하도록 하자.

 

 

• JSX 내부에서 변수 사용하기

{변수이름} 형태로 넣어주면 변수를 인식해 return 해준다.

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

function App() {
  let num = 30;
  return (
    <div>
      <div>this is react program </div>
      <h1>Title {num}</h1>
      <hr/>
    </div>
  );
}

export default App;

 

 

 

---

3. 조건문 사용하기

 

JSX에서는 if문을 사용할 수 없다. 대신 삼항연산자와 조건부 렌더링을 사용할 수 있게 해준다. 

 

• 삼항연산자

삼항연산자의 형태는 다음과 같다. {조건(불리언) ? (true일 때)값 : (false일 때)값}

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

function App() {
  let num = 30;
  return (
    <div>
      <div>this is react program {num === 30 ? "and very good":"and bad"}</div>
      <h1>Title</h1>
      <hr/>
    </div>
  );
}

export default App;

위의 조건은 참이므로 "this is react program and very good" 이라는 내용이 출력될 것이다.

 

• 조건부 렌더링

반면 조건부 렌더링은 {조건 && (true일 때)값}의 형태로, 참일 경우에만 값을 나타내는 형식이다.

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

function App() {
  let num = 30;
  return (
    <div>
      <div>this is react program {num === 10 && "and very good"}</div>
      <h1>Title</h1>
      <hr/>
    </div>
  );
}

export default App;

조건이 false이기 때문에 구문 뒤에 아무런 문자열도 붙지 않게 된다.

 

 

 

---

4. CSS 사용하기

 

CSS를 사용하는 방법에는 3가지가 있다. 인라인으로 적는 방식, 외부 파일을 가져오는 방식, 라이브러리를 사용하는 방식이다.

 

 

• 인라인으로 적기

원래 css를 적을 때는 "font-size"라고 적었지만, JSX에서 인라인으로 적을 때는 "fontSize"와 같이 "-"를 사용하지 않고 대문자를 이용한다.

 

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

function App() {
  const mystyle = {
    color: "red",
    fontSize: "50px",
  };
  
  return (
    <div>
      <div style={mystyle}>this is react program</div>
      <h1>title</h1>
      <hr/>
    </div>
    
  );
}

export default App;

 

 

• 외부 파일(App.css)

인라인으로 적는 것과는 다르게 css에서 "-"를 사용할 수 있다. className을 통해 css에서 정보를 가져올 수 있다.

 

- App.css

.mystyle {
  color: red;
  font-size: 50px;
}

 

- App.js

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

function App() {
  
  return (
    <div>
      <div className="mystyle">this is react program</div>
      <h1>title</h1>
      <hr/>
    </div>
    
  );
}

export default App;

---