React.js 1 - 기초 개념정리

퇴사를 하고 vue개발자로 지내다가 이직을 준비해야 하는 시점에서 시간이 남을 때 리액트 공부를 해두는 것도 좋을 것 같다는 생각이 들어 리액트 사이드 프로젝트를 합류하게 되었다. 공부할 겸 정리하려고 한다.

1. 리액트란?

웹페이지에 인터렉션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야 하기 때문에 메모리 누수와 코드가 난잡해지는 문제가 발생하곤 한다. 처리해야 할 이벤트들도 다양해지고, 관리해야 할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하느 ㄴ업데이트 규칙도 복잡해지기 마련이다. 

이러한 문제점을 개선하기 위해 페이스북 개발팀에서 만든것이 바로 리액트이다.

페이스북 개발팀은 이를 해결하려고 어떤 데이터가 변할때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식이다.이렇게 하면 애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도 많이 줄어든다. 더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로만들면 되기때문이다.

여기서 리액트는 Virtual DOM이라는 것을 사용한다.
이 Virtual DOM은 가상의 DOM으로, 브라우저에 실제로 보여지는 DOM이 아니라 단순히 메모리에 가상으로 존재하는 DOM으로서, 단순한 Javascript객체이기 때문에 작동 성능이 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다고 한다.
리액트는 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 가상의 DOM을 통해 렌더링한다. 
이때 리액트 내부의 엔진을 통해 실제 브라우저에서 보여지고 있는 DOM과 비교를 한 후, 차이가 있는 곳을 감지해서 실제 DOM에 패치를 시킨다.

2. 프로젝트 생성

리액트 프로젝트를 생성하고 public ->src -> index.js 파일을 열어보면 

ReactDom.render(<App/>, document.getElemnetById(‘root’)); 라는 코드가 있ek.
* 여기서 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로 실행시켜주면 
Hello World라는 문구가 출력이 된다.

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

이런 리액트 컴포넌트는 함수 형태로 작성할 수 있고, 클래스 형태로 작성할 수도 있다. (하지만 함수형태로 사용하는 것을 권장한다.)

2. JSX

JSX는 자바스크립트의 확장 문법이며 XML(위와 같은 <App/>를 호출하는 모양)과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링(묶여지는)되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 

*번들러
리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성이 되는데 이 과정에서 node_modules디렉토리에 react 모듈이 설치된다. 그리고 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다.
이렇게 모듈을 불러와서 사용하는 것은 사실 브라우저에는 없던 기능인데 브라우저가 아닌환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. 참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다. 

이러한 기능을 브라우저에서도 사용하기 위해 번들러를 사용한다. 번들(bundle)은 묶는다는 뜻으로, 즉 파일을 묶듯이 연결하는 것이다. 

대표적인 번들러로 웹팩, Parcel,browserify라는 도구들이 있으며, 각 도구마다 특성이 다르다. 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세이다. 편의성과 확장성이 다른 도구들보다 뛰어나기 때문이다. 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일로 생성해준다.또 최적화 과정에서 여러개의 파일로 분리될 수 있다.

Babel은 자바스크립트의 문법을 확장해주는 도구로, 최신 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로 구형 브라우저 같은 환경에서도 동작할 수 있게 해주는 역할을 한다. 
리액트에서 말하는 JSX는 JS 기반이고, 내부적으로는 이런 식으로 변환이 되어서 사용할 수 있게 된다. 정도로만 알고 있으면 된다.

2. JSX문법 특징 및 규칙

1) 코드 작성할 때 부모요소로 감싸기

import React from 'react';
 
function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
  );
}
 
export default App;

리액트 컴포넌트에서 요소 여러개를 하나의 요소인 <div>와 같은 부모요소로 감싸주어야 한다.
그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

2) 자바스크립트 표현

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

JSX안에서 자바스크립트 표현식을 쓸 수 있다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

3) If 문 대신 조건부 연산자

import React from ‘react‘;


function App() {
  const name = ‘리액트‘;
  return (
    <div>
      {name === ‘리액트‘ ? (
        <h1>리액트입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  );
}

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자의 또 다른 이름은 삼항 연산자이다.

같은 의미로 &&(AND)연산자를 이용해 다음과 같이 표현할 수도 있다.

import React from ‘react‘;


function App() {
  const name = ‘뤼왝트‘;
  return <div>{name === ‘리액트‘ && <h1>리액트입니다.</h1>}</div>;
}



export default App;

 

4)인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름이 있다. 이러한 이름은 - 문자를 없애고 카멜 표기법(camelCase)으로 작성해야 한다. 따라서 background-color는 backgroundColor로 작성한다.

import React from ‘react‘;


function App() {
  const name = ‘리액트‘;
  const style = {
    // background-color는 backgroundColor와 같이 -가 사라지고 카멜 표기법으로 작성됩니다.
    backgroundColor: ‘black‘,
    color: ‘aqua‘,
    fontSize: ‘48px‘, // font-size -> fontSize
    fontWeight: ‘bold‘, // font-weight -> fontWeight
    padding: 16 // 단위를 생략하면 px로 지정됩니다.
  };
  return <div style={style}>{name} </div>;
}



export default App;

 

5) class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정한다. 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}
 
export default App;

6) 주석

주석은 /* … */ 와 같은 형식으로 작성한다.