TIL - JSX, Component ( React -2 )

rain98·2021년 5월 24일

TIL

목록 보기

28/32

지난글 react의 특징의 핵짐중 핵심 Component와 JSX를 알아보자.

Component

저번글에도 그대로 사용했지만
Component는 재활용이 가능한 UI 구성 단위를 말한다. 생각해보자
예를 들어 웹 어클리케이션 여러 곳에서 같은 버튼이 필요하다면, 똑같은 코드를 반복해서 버튼을 생성해서 쓰면 코드도 더러워질 뿐더러 유지보수 또한 어렵다. 이런 부분에서 컴포넌트가 필요하다.

즉 컴포넌트는 함수처럼 여러 부분에서 사용이 가능하다
예를 들어 웹 어클리케이션 여러 곳에서 같은 버튼이 필요하다면, HTML을 따로 추가 할 필요없이 공통된 하나의 버튼 컴포넌트를 생성하고, 그 컴포넌트를 필요한 곳에 가져다 사용하면 된다.

이러한 특징은 생산성과 유지 보수를 용이하게 한다

컴포넌트의 특징

재활용하여 사용할 수 있다.
코드 유지보수에 좋다.
해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

그렇다면 그렇게 유용하다는 컴포넌트를 사용해보자.
cra를 사용해서 처음 열어본 APP.js다.

cra란 (create-react-app) npm을 사용하여 리액트 앱을 만들어주고,
babel과 webpack등등 도구를 설치하여 쉽게 프로젝트를 생성 할 수 있게 하는 도구다.

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

class App extends React.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;

맨위에 코드를 보면

import는 무언가를 불러 가져온다는 뜻이다. 무엇을 가져와서 이름은 어떻게 지을지 정한다.
첫번째 코드를 보자. JSX를 사용하기 위해 리액트를 불러온다. 파일에서 JSX를 사용하려면 꼭 React를 import 해야한다.

이렇게, import 를 하는 것은, 우리가 webpack 을 사용하기에 가능한 작업이다.

그다음줄을 가서 App이라는 컴포넌트를 생성한다음

마지막 줄에 해당 하는 코드는 Export를 통해 내보낸다. 컴포넌트에 이름을 App이라고 지었기 때문이 이를 내보내기 위해 App이라는 이름을 통해 내보낸다.

그렇다면 이 만든 컴포넌트를 불러올 때는 어떻게 사용할까??

이렇게 만들어낸 컴포넌트를 다른 파일에 불러 올 수 있다.
index.js파일을 보면 다음과 같은 코드가 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

브라우저 상에 우리의 리액트 컴포넌트를 보여주기 위해서는 ReactDOM.render 함수를 사용한다. 첫번째 파라미터는 렌더링 할 결과물이고, 두번째 파라미터는 컴포넌트를 어떤 DOM 에 그릴지 정해줍니다.

id 가 root 인 DOM 을 찾아서 그리도록 설정이 되어있는데, 해당 DOM 은 public/index.html 파일에서 찾아볼 수 있다.

index.html 해당 파일 안에 있는

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

기본적인 구조가 app.js
(app 컴포넌트생성 하고 app 컴포넌트를 내보냄)
index.js
(내보낸 app 컴포넌트를 받고
ReactDOM.render(<App />, document.getElementById("root"));로 내보냄 )
public/index.html
(<div id="root"></div> 으로 렌더링하여 HTML화)

컴포넌트 선언

컴포넌트를 선언하는 방식에는 두 가지가 있다.

Class형 컴포넌트(Class Component)
함수형 컴포넌트(Functional Component)

1) Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return ( <div>
        <h1>This is Class Component!</h1>
	    </div>
    )
  }
}

export default Component

클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환한다.

2) Functional Component

import React from 'react'

const Component = () => {
  return (
	  <div>
	    <h1>This is Functional Component!</h1>
	  </div>
	)
};

export default Component

함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있다.
lifecylce, state, props 등 주요 개념들을 익히기에는 class형 컴포넌트가 훨씬 직관적이고 배우기 쉽기 때문에, 초반에는 클래스형 컴포넌트를 사용해서 익히는게 좋다고 한다.

JSX

JSX(JavaScript Syntax Extension)는 리액트에서 사용하는 자바스크립트 확장 문법이다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.

HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다.
HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.
그러기 때문에 DOM과 Event처리에도 훨씬 수월하다.

JSX 문법

JSX 안에 자바스크립트 값 사용하기

JSX 내부에서 {}중괄호를 사용하여 자바스크립트 값을 사용 할 수 있다.

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        리액트 {name}!
      </div>
    );
  }
}

export default App;

자바스크립트 표현 : { ... javascript... }

className

JSX 에서 클래스를 설정 할 때, html 에서 하는 것과 다르다

class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}

export default App;

그 이유는 자바스크립트 내부에 class라는 함수가 있기 때문에 class 대신 className을 사용하여 클래스를 부여 할 수 있다.

class ->className

Inline Styling

JSX내부에 스타일을 부여 할때 객체 형태로 작성 해줘야한다.

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };

    return (
      <div style={{backgroundColor: "black"}}>
        리액트
      </div>
    );
  }
}

기존 HTML에서는 ="backgroundColor: black ..."
이런식으로 작성했지만 리액트에서는 객체 형태로 작성해줘야 한다.

Inline Styling : <div style={{backgroundColor: "black"}}></div>

Fragments

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

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

export default App;

이렇게하면 에러가 발생한다 JSX의 경우 하나의 태그로 감싸져야 한다.

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

export default App;

이렇게 하면 해결이 되지만, 단순히 감싸기 위해서 의미없는 div 를 사용하는게 보기 좋아 보이지 않는다. 그럴땐 Fragments를 사용해보자

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

export default App;