[JAVASCRIPT] React

출처: 위키백과

 

React 란?

리액트는 자바스크립트 라이브러리의 하나로 UI(User Interface)를 만들기 위해 사용되는 라이브러리이다.

싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용되며 프레임워크가 아닌 라이브러리이기 때문에 기본적으로 제공되지 않는 몇몇 기능들이 있다. (라우팅, API통신 등등) 이럴 때는 추가 라이브러리를 사용해야 한다.

 

---

React 의 특징

 

1. Virtual DOM

DOM?(Document Object Model)
DOM은 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리한다.

 

React는 Virtual DOM을 메모리상에 만들고 이벤트가 발생할 때마다 Virtual DOM에 모든 연산을 수행한 후,

실제 DOM에 반영한다. 이는 연산을 최소화하여 속도나 효율을 높인다.

 

앞선 포스팅 jQuery에서 Virtual DOM에 대해서 언급한 적이 있는데 JQuery는 실제 DOM을 조작하여 웹을 동적으로 만드는 데에 있어 React와 차이를 보인다.

 

2. 단방향 데이터

React는 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI를 갱신하는

단방향 데이터 흐름을 가진다.

 

데이터가 많아지게 되면 데이터의 흐름을 추적하기 힘들고 복잡해지는 양방향 바인딩의 단점들 때문에

React에서는 단방향 데이터 바인딩을 사용한다.

 

3. Component 기반 구조

Component?
Component는 독립적인 단위의 모듈을 말한다.
Component를 사용하면 재사용을 할 수 있고 이를 통해 개발 생산성을 향상시킨다.

 

React로 웹을 만들 때는 여러 Component를 쪼개서 만든다. 

프로젝트 내에서 기능단위, UI단위로 쪼개서 코드를 관리하고

한 페이지 내에서도 각 부분을 독립된 Component로 만들어 이를 조립해 화면을 구성한다.

이것 또한 React의 큰 장점이라고 볼 수 있다.

재사용되는 코드를 반복 입력할 필요 없이 Component를 가져다 쓰면 된다. 즉, 유지보수가 용이하다.

 

function App() extends Component {

  return (
    <div>
      <Router>
        <Header/>
        <br/><br/><br/><br/><br/>
          <div className="container">
            <Switch>
              <Route path = "/header" component={Header} />
              <Route path = "/main" component={Main} />
              <Route path = "/login" component={Login} />
            </Switch>
          </div>
        <Footer/>
      </Router>
    </div>
  );
}

export default App;

 

 

4. JSX

JSX(JavaScript XML)는 XML같은 문법을 사용하는 템플릿 언어이다.

HTML과 유사한 형태를 띄며 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다.

JSX사용이 필수는 아니지만 React Component들이 일반적으로 JSX를 사용하여 작성된다.

 

function Component() {
	const item = "new Item";
    return (
        <div>{item}</div>
    );
}

export default Component;

 

위와 같이 스크립트에서 HTML태그를 사용할 수 있고 변수를 HTML태그에서 바로 호출하여 사용할 수 있다.

(JSP와 유사)

 

4. Props & State

• Props
  Props란 부모 Component에서 자식 Component로 전달해주는 데이터를 말한다.
  자식 Component에서 전달받은 props는 변경이 불가능하고 최상위 부모 Compoment만 props를 변경할 수 있다.

 

• State
  State는 Component 내부에서 선언하고 내부에서 값을 변경할 수 있다.
  동적인 데이터를 다룰 때 사용하며 사용자 화면에서 변경이 있을 때 데이터를 동적으로 처리해준다.
  클래스형 Component에서 사용할 수 있다.

 

---

 

마치며

React 경험이 적어서 이번 포스팅은 기본 개념을 공부하고 정리하는 기회가 되었다.

React를 경험해 본 사람이라면 대다수가 긍정적 반응을 보인다고 하는데 그 이유를 대략 알 것 같다.

기존의 방식에 적응해있어서 '이게 안된다고?' 혹은 '이게 된다고?' 하는 경우가 많긴 했지만

Component기반인 것이 무척 마음에 들었다. JSX 문법 역시 익숙하면서도 신선한 느낌이 들었다.

분명한 건 다시금 React를 찾게 될 것 같다.

 

 

 

#References

1] 리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전

 

2] React란 무엇인가 :: 가치관제작소 (tistory.com)

React란 무엇인가