[React] #00 시작하기전

React 스터디를 시작하기 전 알아야 할 것들은 정리해 보았다 이 글은 굉장히 주관적인 글이다

 

React는 Front 영역에서 DOM 조작을 보다 용이하게 해준다고 생각이 든다.Frontend 개발은 DOM 조작이 필수적으로 들어간다. React는 단순히 View 컨트롤만 한다고 생각할 수 있지만 그것만으로도 엄청난 개발 효과를 낼 수 있다.

React 공식 홈페이지에서는 아래와 같이 설명한다

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

HTML 삽입 Javascript의 DOM 조작 대해서 먼저 간단하게 확인해보자

  const text = 'InsertHtml';
  
  // Text 만 삽입
  document.body.append( text );

  // div 생성하여 삽입
  const divCreate = document.createElement('div');
  divCreate.append(text);
  document.body.append(divCreate);

  // String Type Body에 추가
  let html = '<div>InsertHtmlElments</div>';
  document.body.insertAdjacentHTML('beforeend', html);
  
  /* ==================================================== 
  Jquery를 쓴다면 더 간편하게 사용이 가능하다
  ==================================================== */
  const html = '<div>InnerHtml</div>';

  $('#elm').append(html);
  $('#elm').html(html);

위의 방법으로 대표적인 동작은 클릭 시 팝업을 보여준다든지 또는 클릭 시에 한페이지에서 각각의 정보를 보여줄 때 해당 정보를 불러와 DOM에 삽입을 한다. 일반적으로, DOM 조작 비용은 많이 든다. DOM이 그려지는 과정을 간단하게 이미지로 확인해보자

 

 

만약 여러개의 Node 중 1개의 Node만 수정을 해도 위의 과정을 전부 반복한다 (Repaint, Reflow) 이 말은 Layout를 재계산하여 전부 다시 그린다는 것이다. 물론 우리가 사용하는 브라우저에는 나타나지 않는다 하지만 간혹가다 DOM 조작이 많아지거나 내용이 많아지면 살짝 끊기는 느낌을 본 적이 있다면  위의 과정에서 비용이 많이 발생하여 느려진거라고 생각이 든다. Javasciprt로 DOM 조작에 대한 HTML 관리 한다고 할 때에는 아래 처럼 작성이 될 것이다.

const DOM = {
    // case 1
    Button1(elm) {
        let html = 
            '<div class="over">' +
                '' + elm + '' +
            '</div>' ;

        return html;
    },

    // case 2
    Button2(elm) {
        return `
            <div class="watch">
                ${elm}
            </div>
        `
    },
}

// case1 insert DOM
const insertDom = document.getElementById('insertDom');
insertDom.innerHTML = DOM.Button1('Button-01');

case1과 2의 차이점은 Template literals 사용 미사용의 여부일 뿐이다. 위의 방법으로 HTML 관리를 할 수 있지만 Event 동작이 여러모로 불편할 수도 있다. Function을 실행시키기 위해선 동적으로 생성이 되었기 때문에 Event를 따로 잡아야 한다

동적으로 생성된 DOM의 이벤트 연결은 Jquery를 사용한다면 쉽게 연결이 가능하다.
$(document).on("click", ".over", function(){ }); 
대부분의 동적으로 HTML을 삽입 시 이런 구조로 진행이 될 것이다

정보를 받아 DOM안에 삽입하는 일반적인 과정이다. 위의 과정에서 우리는 HTML 동적으로 생성하여 DOM에 추가한다 바로 이때 DOM은 재계산하여 전부 다시 그린다.

 

React에서의 DOM을 사용한다고 할 때의 기본 코드다.

class HelloReact extends React.Component {
  render() {
    return (
      <div>
        HI !!
      </div>
    );
  }
}

ReactDOM.render(
  <HelloReact" />,
  document.getElementById('ROOT')
);

 

<HelloReact /> 컴포넌트를 만들어서 HTML의 ROOT라는 Id 값을 선택하여 해당 Element의 삽입하는  기본 코드다.

<div />에 Click 이벤트를 넣고 싶다면 아래와 같이 작성하면 된다

class HelloReact extends React.Component {
  handleOnClick = () => {
    alert('CLICK!')
  }

  render() {
    return ( 
      <div onClick={this.handleOnClick}>
        HI!!
      </div>
    );
  }
}

ReactDOM.render( 
  <HelloReact />,
  document.getElementById('ROOT')
);

 

<div />에 쉽게 Click 이벤트도 작성할 수 있다. 컴포넌트 안에 다른 컴포넌트도 삽입을 할수 있다

class HelloReact extends React.Component {
  handleOnClick = () => {
    alert('CLICK!')
  }

  render() {
    return ( 
      <div onClick={this.handleOnClick}>
      	<MainView />
        HI!!
      </div>
    );
  }
}

class MainView extends React.Component {
  render() {
    return ( 
      <div>
        Header
      </div>
    );
  }
}

ReactDOM.render( 
  <HelloReact />,
  document.getElementById('ROOT')
);

 

<HelloReact /> 컴포넌트 안에 <MainView /> 컴포넌트를 삽입한 코드이다. 만약 웹페이지 레이아웃을 잡는다고 가정을 해보면 상단, 메인, 푸터 별로 컴포넌트를 만들어서 관리가 가능하다. 기본적으로 템플릿 언어를 사용해 봤으면, 아래를 보면 쉽게 이해가 가능할 것이다.

 

Front개발자 또는 SpringBoot, EJS, Jinja의 경험이 있다면 바로 이해를 했을 것이다. 백엔드 언어의 프레임워크에 Include 개념이 있듯이 React는 컴포넌트 간 연결이 가능하다.

 

위의 그림처럼 컴포넌트를 연결하여 사용할수 가 있다. 프로젝트의 규모가 커지면 커질수록 공통 컴포넌트 관리 그리고 폴더 구조에 대한 정리가 필요하다. React로 프로젝트 작업하다보면 SSR / CSR 어떤것으로 갈지 정해야 하며, SPA로 갈것인지 말것이지도 정해야 한다. 또한, 의존성 모듈도 설치가 필요하다 그리고 개발은 혼자 하는것이 아니기에 코드에 대한 공유도 필요하다.

 

---

 

개발을 하다 보면 객체지향이라는 말을 많이 듣게 된다. React는 우리가 사용하는 Web의 View부분을 객체화하여 관리할 수 있게 해 준다고 생각한다. 예를 들면 기존 Javascript는 팝업 화면을 동적으로 만들기 위해서는 HTML, JS 파일이 따로 필요할 수도 있다. 하지만 React를 사용한다면 하나의 컴포넌트에서 Html, JS가 컨트롤이 가능하다.

 

이렇듯, HTML을 컴포넌트화 하여 공통 컴포넌트를 만들어서 재 사용이 가능하다, 물론 React를 사용하지 않아도

가능은 하다. 하지만 React를 사용하는 것이 장점이 더 많기 때문에 React를 선호한다

 

React로 개발을 하면서 느낀 점

• 초기 세팅에 대한 진입 어려움

• DOM 객체에 대한 내용을 깊은 이해 

• 하나의 컴포넌트에서의 관리가 용이

• 진입 장벽의 어려움, 기본적인 Javascript를 알고 있어야 한다

• Front 개발의 좀 더 심도 있게 파고들 수 있다

• ES6+의 습득이 필요하다

• 코드의 정리의 필요성

• SPA에 대한 활용 여부

• 코드를 제대로 쓰지 않으면 퍼포먼스가 안나온다는 점

• 오류가 나면 화면이 아예 사라짐

• IE 체크