[React.js] 프로젝트 구성, JSX

프로젝트를 생성하고 프로젝트를 열어보면 아래와 같은 형태로 리액트 프로젝트가 구성되어 있다. 

 

리액트 프로젝트 구성

리액트가 유저인터페이스로 보여지는 방법은 App.js -> index.js -> index.html 파일 순으로 따라 가보면 리액트의 렌더링하는 방법을 알 수 있게 된다.

---

[App.js]

create-react-app 명령어를 통해 리액트 프로젝트를 구성하면 App.js에는 기본적으로 함수기반의 컴포넌트가 생성된다.

함수기반의 컴포넌트와 클래스기반 컴포넌트는 약간 차이가 있는데,

• 함수기반 컴포넌트 : 상태값 변경없이 props만 부모 컴포넌트로부터 받는 경우, 렌더링만 필요한 경우
• 클래스기반 컴포넌트 : 상태값 변경이 필요한 경우

로 나뉘어진다.

 

 

조금 더 쉽게 보기 위해 아래 함수기반 컴포넌트를 클래스기반 컴포넌트로 수정하겠다.

 

함수기반

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

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>
  );
}

export default App;

 

클래스 기반

import React, {Component} from 'react'; //리액트 임포트
import logo from './logo.svg'; //사진 임포트
import './App.css'; //스타일 임포트

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App; //컴포넌트 내보내기

 

[index.js]

ReactDOM.render를 이용해 App 컴포넌트를 root 라는 div에 그려주도록 한다. 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; //App.js 가져오기
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>, //1
  document.getElementById('root') //2
); //1. 렌더링 할 결과물 2. 어떤 DOM에 그릴지

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

[index.html]

실제 div 태그 내에는 아무 내용이 없지만 index.js를 매개로 App컴포넌트가 렌더링된다.

<div id="root"></div>

 

---

[JSX]

1. return내 값은 하나의 태그를 통해 꼭 닫혀있어야 한다.

import React, {Component} from 'react'; 

class App extends Component {
  render() {
    return (
      <div> //<-- 
        <div>
          안녕
        </div>
        <div>
          하하
        </div>
      </div> //<--
    );
  }
}

export default App; 

 

2. JSX 내 자바스크립트 값 사용

{}을 이용해 값을 불러온다.

import React, {Component} from 'react'; 

class App extends Component {
  render() {
    const str = '반가워';
    return (
      <div>
        hello {str} !
      </div>
    );
  }
}

export default App; 

 

3-1. 스타일 부여

- 객체 형태로 스타일을 부여한다.

import React, {Component} from 'react'; 

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '1rem',
      color: 'aqua',
      fontSize: '36px',
      fontWeight: 600,
    };

    return (
      <div style={style}>
        안녕
      </div>
    );
  }
}

export default App; 

 

3-2. 스타일 부여

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

class App extends Component {
  render() {
    return (
      <div className="App">
        잘가
      </div>
    );
  }
}

export default App;

//App.css
.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}