미래의 나를 위해
독학으로 공부하면서 생기는 문제점 중 하나는 기억력의 한계라고 생각한다.
이 공부로 점차 많은 것을 배워나갈 것이고 또 프로젝트를 진행할건데 그 미래에 혹여나 생각이 잘 나지 않는 부분이 있다면 내가 다시 찾아서 공부한 후 채워나가야 한다. 그때, 내가 잊어버린 부분이 있어서 채워야할 때, 이 블로그의 글로 돌아와서 부족했던 부분을 찾아 채울 수 있도록 도움이 되고자 이 시리즈를 만든다.
공부하기 앞서 잠시 리액트에 대해서 사전 조사한 것을 적어본다.
React 시리즈를 만든 이유?
React를 공부하며 느낀점들, 기억해둬야 할 것들을 정리해서 기록으로 남기려고 한다.
먼저 React란 대체 무엇인지, 정의와 특징을 다루고 특징과 장단점을 정리한다.
React, 왜 쓰는가?
React는 페이스북(현 meta)에서 만들고 제공하는 자바스크립트 라이브러리 입니다. 특히 SPA(Single Page Application) 와 모바일 어플리케이션을 위한 UI(User Interface)를 만드는데 쓰입니다.
프론트단에서 데이터가 바뀌면 해당 화면의 연관된 부분들이 전부 따라서 바뀌는 것은 JS로만 하기에는 쉽지 않습니다. 이 때문에 실제 데이터와 화면이 일치하지 않는 문제도 빈번히 일어납니다. React는 해당 문제를 빠르고 쉽게 해결할 수 있게 합니다.
React 특징
React의 특징을 크게 나누면 다음과 같습니다.
1. Flux 패턴과 단방향 데이터 흐름
2. Component
3. Virtual Dom(가상 돔)
4. Props and State
5. JSX
1. Flux 패턴과 단방향 데이터 흐름(Data Flow)
페이스북은 기존 MVC 모델의 단점을 보완하여 Flux 패턴을 만들어 React에 적용했습니다. MVC 모델의 단점은 양방향 데이터 흐름입니다.
MVC 모델에서 Controller는 Model의 데이터를 조회하고 업데이트하는 역할을 합니다. Model이 업데이트 되면, View는 Model과 상호작용하여 그 업데이트 내용을 화면에 반영합니다. 반대로 View가 Model을 업데이트 할 수도 있습니다. Model이 업데이트 되어 View가 따라서 업데이트 되고, 업데이트 된 View가 다시 다른 Model을 업데이트 한다면, 또 다른 View가 업데이트 될 수 있습니다. 이러한 프로세스는 얘기만 들어도 복잡합니다. 여기에 새로운 기능을 추가하면 더 복잡해집니다. 이는 예기치 않은 오류를 만들 수 있습니다.
다음 그림은 Flux 모델의 데이터 흐름도입니다.
Flux의 가장 큰 특징은 단방향 데이터 흐름입니다. 데이터 흐름은 Dispatcher에서 Store로, Store에서 View로, View는 Action을 통해 다시 Dispatcher로 데이터가 흐릅니다. 이런 단방향 데이터 흐름은 데이터 변화를 휠씬 예측하기 쉽게 만듭니다. MVC 패턴과 비교했을때 새로운 기능을 추가해도 예측하지 못한 오류를 만날 일이 적습니다. Flux를 크게 Dispatcher, Store, View 세 부분으로 구성됩니다.
1) Dispatcher
Dispatcher는 Flux의 모든 데이터 흐름을 관리하는 허브 역할을 하는 부분입니다. Action이 발생되면 Dispatcher로 전달되는데, Dispatcher는 전달된 Action을 보고, 등록된 콜백 함수를 실행하여 Store에 데이터를 전달합니다. Dispatcher는 전체 어플리케이션에서 한 개의 인스턴스만 사용됩니다.
2) Store
어플리케이션의 모든 상태 변경은 Store에 의해 결정이 됩니다. Dispatcher로 부터 메시지를 수신 받기 위해서는 Dispatcher에 콜백 함수를 등록해야 합니다. Store가 변경되면 View에 변경되었다는 사실을 알려주게 됩니다. Store은 싱글톤으로 관리됩니다.
3) View
Flux의 View는 화면에 나타내는 것 뿐만이나라, 자식 View로 데이터를 흘려 보내는 뷰 컨트롤러의 역할도 함께 합니다.
4) Action
Dispatcher에서 콜백 함수가 실행 되면 Store가 업데이트 되게 되는데, 이 콜백 함수를 실행 할 떼 데이터가 담겨 있는 객체가 인수로 전달 되어야 합니다. 이 전달 되는 객체를 Action이라고 하는데, Action은 대채로 액션 생성자(Action creator)에서 만들어집니다.
2. Component
React는 UI(View)를 여러 컴포넌트(component)로 분할해서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트들을 모아서 화면을 구성합니다.
컴포넌트 단위로 분할되어 있기 때문에, 전체 코드를 파악하기 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.
3. Virtual Dom
돔(DOM) 이란?
Document Object Model의 약자로 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다. React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있습니다.
4. Props and State
Props (변하지 않는 값)
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 통해 얻은 데이터가 어디서 왔는지 알 수 없습니다. props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다. 즉 자식 컴포넌트에서는 읽기만 가능합니다.
State (변하는 값)
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다. State가 많아질 수록 어플리케이션은 복잡해지기 때문에 최소화할 수록 좋습니다.
5. JSX
JSX란 ?
Javascript를 확장한 문법입니다. React 공식 문서를 참고하였습니다.
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React 공식문서(링크)
