[React] React.js 강좌 1. 기초 개념 정리

React.js 기초 개념 정리

 

1. 리엑트란?

웹페이지에 인터랙션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야하기 때문에 코드가 난잡해지는 문제가 발생하곤 합니다.

처리해야할 이벤트도 다양해지고, 관리해야할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하는 업데이트 규칙도 복잡해지기 마련입니다.

 

리엑트는 이러한 문제점을 개선하기 위해 아래와 같은 방법을 사용합니다!

 

View에서 어떠한 상태가 바뀌었을 때 그 상태에 따라 DOM을 어떻게 업데이트 할지를 정하는 것이 아니라, 아예 View를 다 날려버리고 새로 보여주면 코드가 난잡해지는 것을 방지할 수 있지 않을까, 하는 아이디어에서 리엑트가 탄생했습니다.

여기서 리엑트는 Virtual DOM이라는 것을 사용합니다.

이 Virtual DOM은 가상의 DOM으로, 브라우저에 실제로 보여지는 DOM이 아니라 단순히 메모리에 가상으로 존재하는 DOM으로서, 단순한 Javascript객체이기 때문에 작동 성능이 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다고 합니다.

리엑트는 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 가상의 DOM을 통해 렌더링합니다.

이때 리엑트 내부의 엔진을 통해 실제 브라우저에서 보여지고 있는 DOM과 비교를 한 후, 차이가 있는 곳을 감지해서 실제 DOM에 패치를 시킵니다.

 

 

2. Hello world

먼저 react는 node.js 기반으로 되어있기 때문에 node.js 설치를 선행하셔야 합니다.

https://nodejs.org/ko/

Node.js

안정적인 버전으로 받아주시고, 저는 vscode를 사용하기 때문에 vscode도 받아주시면 좋습니다.

 

설치가 다 된 후, npx create-react-app [프로젝트이름] 명령어를 입력하면 react 프로젝트가 생성이 됩니다.

npx create-react-app test-app

대략적으로 이런 파일들이 생성이 될텐데, src 폴더에 있는 index.js 파일을 열어보면

ReactDOM.render(<App/>, document.getElemnetById(‘root’)); 라는 코드가 있습니다.

*여기서 React.StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, Fragment와 같이 UI를 렌더링하지 않으며, 자식들에 대한 부가적인 검사와 경고를 활성화 하는 도구입니다.

이 코드는 id가 root인 요소, 즉 public폴더의 index.html 파일 내의 <div id=”root”>에 렌더링을 한다는 의미입니다.

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return ( <h1>Hello World!</h1> );
  }
}

export default App;

 

App.js 파일을 열어보면 React 로고를 띄우는 코드가 있는데, 위 코드로 변경해줍니다.

npm run start

그리고 터미널에서 npm run start를 입력할 경우 페이지에는 Hello World라는 문구가 출력이 됩니다.

 

앞에서 App.js에서 사용된 App Class가 Component를 extends했던 것을 확인할 수 있습니다. 이는 리엑트가 컴포넌트 기반이기 때문에 사용되는 것이고, 꼭 기억을 해야하는 부분입니다.

 

이런 리엑트 컴포넌트는 함수 형태로 작성할 수도 있고, 클래스 형태로 작성할 수도 있습니다.

하지만 함수 형태로 사용하는 것을 권장해드립니다!

 

 

 

 

3. JSX

리엑트 컴포넌트는 XML 형식의 값을 반환하는데 (위와 같은 <App/>를 호출하는 모양), 이를 JSX라고 부릅니다.

JSX는 리엑트에서 View를 표현할 때 사용하는 문법이자 확장자입니다. HTML과 같이 생겼지만, 실제로는 Javascript 기반입니다.

 

 

이 리엑트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 Javascript로 변환해주는데, 결과는 위와 같습니다.

Babel은 자바스크립트의 문법을 확장해주는 도구로, 최신 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로 구형 브라우저 같은 환경에서도 동작할 수 있게 해주는 역할을 합니다.

리엑트에서 말하는 JSX는 Javascript기반이고, 내부적으로는 이런 식으로 변환이 되어서 사용할 수 있게 된다! 정도로만 알고 계시면 됩니다.

 

 

 

추가적으로 프로젝트에 코드를 몇 줄 더 작성해보겠습니다.

Test.jsx라는 파일을 App.js이 있는 디렉토리에 생성하시고 아래와 같이 작성해줍니다.

 

Test.jsx

import React from 'react';

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

export default Test;

App.js

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

class App extends Component {
  render() {
    return (
    	<h1>Hello World!</h1>
        <Test />
    );
  }
}

export default App;

위와 같이 function 함수 안에서 return 하는 곳에 JSX 문법을 사용할 수 있습니다.

JSX가 자바스크립트 기반이니, JSX 내부에서도 자바스크립트 값을 사용할 수 있습니다. 이때, 자바스크립트 변수를 사용할 때 에는 아래와 같이 {} 대괄호를 사용하여 보여줍니다.

 

 

import React from 'react';

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

export default Test;

JSX에서 태그에 style과 css class를 설정하는 방법은 HTML에서 설정하는 방법과는 다릅니다.

우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 -로 구분되어 있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍 해주어야 합니다.

 

 

import React from 'react';

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

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

export default Test;

위 예제는 함수 혹은 클래스 내부에서 css를 적용할 때의 예제입니다.

 

 

 

 

 

Test.css

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

 Test.jsx와 같은 경로에 css파일을 생성해줍니다.

 

 

Test.jsx

import React from 'react';
import './Test.css';


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

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

export default Test;

함수 외부에서 css를 적용할 때에는 위와 같이 사용하면 됩니다.

다만 class를 설정할 때에는 class=가 아닌 className=으로 설정을 해주어야 합니다.