React 시작하기

React란? 

 간단히 말해 SPA(Single Page Application) 개발을 위한 라이브러리이다. SPA 개발을 위한 유명한 툴로는 React, Angular, Vue.js 등이 있는데 이 중 Angular와 Vue.js는 프레임워크이고 React만 라이브러리라고 한다. 이로 인해 얻을 수 있는 장점은 타 프레임워크와 함께 쓰기 편하다는 점 정도가 있을 것이다.

 Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리이다.

 

 

React 사용

import './App.css';
import { useState } from 'react';

function App() {
  let [post, changePost] = '글 제목'
  let [thumb, changeThumb] = useState(0);
  
  return (
    <div className="App">
      <div className='header'>
        <h4>MyBlog</h4>
      </div>
      
      <div className='list'>
        <h4>{post}</h4>
        <p>2023-06-29</p>
      </div>
      
    </div>
  );
}

export default App;

위와 같은 형태로 작성된다. 보시다시피 JavaScript의 함수가 HTML 코드들을 리턴하는 요상한 형태로 쓰여있는데, 사실 return의 괄호안에 들어간 코드들은 HTML 코드가 아니라 JSX 코드이다.

 

JSX(JavaScript XML)

이름에서 볼 수 있듯 XML을 기반으로한 언어로 JavaScript내에서 HTML을 표현하기 위해 설계되었다. HTML과 거의 흡사하게 쓰이지만 기본적으로 JavaScript 내부에서 사용하다보니 JavaScript의 예약어와 겹치는 예약어는 그대로 사용하지 못하고 조금 변경된 상태로 사용되고 있다. 예를 들면 위의 예시코드를 보면 div에 class를 줄 때 className='list' 이렇게 쓰여있는걸 볼 수 있는데 뭐 이런 것들이 class, for 등등 여러가지 있다. 자세한 용법은 다른 글을 포스트하면서 조금씩 다룰 예정이다.

 

 

 

---

 처음 SPA를 구현하는 툴을 공부하려고 마음먹었을 때 React, Angular, Vue.js 셋 중 많이들 고민할 겁니다. 저의 경우에는 React가 가장 범용적으로 쓰인다는 점, 프레임워크가 아닌 라이브러리이기 때문에 내가 제어를 할 수 있어 공부에 가장 도움이 될 것 같다는 점, React를 익히고 나서 혹시라도 후에 모바일 앱 개발에 관심을 가지게 된다면 React 지식을 React native로 확장하기 쉽다는점 등에서 React를 골랐어요.

 셋 다 해보지 못하고 React를 이제막 시작한 입장에서 단언해서 말할 순 없지만 내가 React를 고른 이유를 참고하시라고 일단 써둡니다. 제 생각에 Angular, Vue.js 등은 제어를 프레임워크가 해주니까 배워두면 React보다 쉽게 사용할 수 있을 것 같긴해요. 세가지 특징을 비교한 후 본인의 개발 목적에 맞는 툴을 사용합시다. 물론 회사에서 시키는게 있다면 그거부터 해야겠지만요.