컴포넌트 파헤치기

만들어진 프로젝트 구조
1.PNG

App.js 파일을 살펴보면 import, Component, render, export가 보이는데 차례대로
공부해봅시다.

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" />
          <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를 한다는건 무엇인가 불러오겠다는 것이고, 제일 상단에서 사용한 import는 React와 그 내부에 있는
Component를 불러옵니다. JSX를 사용할려면 react를 import 해야 합니다.

그 아래 있는 2줄은 각각 같은 파일에 존재하는 logo.svg와 App.css를 불러옵니다.

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

다음으로는 컴포넌트를 만드는 방법은 두가지 인데, 하나는 아래 처럼 class를 통해서 만드는 것과
함수를 통하여 컴포넌트를 만드는 방법이 있습니다.

class형태로 만들어진 컴포넌트에는 꼭, render 함수가 존재해야 하고 그 내부에서는 JSX를 return 해줘야 합니다.

  class App extends Component {
  render() {
    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;

JSX란?

리액트 개발을 쉽게 하기 위해서 HTML과 비슷한 문법으로 작성을 하면 React.createElement를
사용하는 자바스크립트 형태로 변환 시켜줍니다.

app.js에서 HTML 같은 코드가 JSX입니다.

규칙

  • 닫는 태그

모든 태그는 꼭 닫혀있어야 됩니다. 태그의 종류 상관없이 평소에 닫지 않던
br, input 등등 태그를 안닫게 되면 오류가 납니다.

// 오류
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <input>
      </div>
    );
  }
}

export default App;
  • 감싸져 있는 엘리먼트

무조건 두개 이상의 엘리먼트는 하나의 엘리먼트로 감싸져 있어야 합니다.
하지만 단순히 감싸기 위해서 div를 사용하기 싫거나 스타일 관련해서 코드가 꼬일경우도
있기 때문에 Fragment 라는것을 사용하면 됩니다. (v16.2에 도입)

// 오류
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div></div>
      <div></div>
    );
  }
}

export default App;

Fragment 사용

// Fragment
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <fragment>
        <div></div>
        <div></div>
      </fragment>
    );
  }
}

export default App;
  • JSX 안에 자바스크립트 값 사용
import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'React';
    return (
      <div>hello {name}!</div>
    );
  }
}

export default App;
  • 조건부 렌더링

JSX내부에서 조건부 렌더링을 하게 되면 보통 삼항 연산자를 사용하거나 AND 연사자를 사용 합니다.
만약 if 문을 사용 하려면 (IIFE: 즉시 실행 함수표현) 을 사용해야 합니다.

삼항연산자 사용

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'React';
    return (
      <div>
      {
        true ? 
        (<div>hello {name}!</div>) : 
        (<div>X</div>)

      }
      </div>
    );
  }
}

export default App;

AND 연산자 사용

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'React';
    return (
      <div>
      {
        true && (<div>hello {name}!</div>)
      }
      </div>
    );
  }
}

export default App;

삼항연산자, AND연산자로 대부분 해결 가능하지만 복잡한 조건을 써야 된다면 웬만하면 JSX 밖에서 로직을
작성하는것이 좋지만, 꼭 JSX 내부 에서 작성한다면 아래와 같이 가능합니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const number = 2;
    return (
      <div>
      {
        (_ => {
            if(number === 3) return (<div>{number}</div>)
            if(number === 2) return (<div>{number}</div>)
            if(number === 1) return (<div>{number}</div>)
        })()
      }
      </div>
    );
  }
}

export default App;
  • JSX에서의 style과 className

JSX에서 style과 css 클래스를 설정 할 떄, html과 다릅니다.

style 사용
리액트에서 스타일을 사용할때는 객체형태로 작성해야 합니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
      backgroundColor: '#000',
      height: '50px',
      color: '#fff',
      padding: '15px'
    }
    return (
      <div style={style}>
        안녕!
      </div>
    );
  }
}

export default App;

className 사용
보통 html에서 클래스를 사용할때 <div class='ddd'> 이런식으로 사용했지만 리액트 컴포넌트
에서는 class 대신 className을 사용하게 됩니다.

css를 아래와 같이 작성하고

.ddd {
  background-color: #000;
  height: 50px;
  color: #fff;
  padding: 15px;
  font-size:30px;
}

App.js 에서는 이렇게 작성합니다.

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

class App extends Component {
  render() {

    return (
      <div className='ddd'>
        안녕!
      </div>
    );
  }
}

export default App;
  • 주석
    JSX에서 주석을 작성하는법을 알아보겠습니다.
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {

    return (

      <div className='ddd'
        // 주석
      >
        {/* 주석 */}
        안녕!
      </div>
    );
  }
}

export default App;