음악, 삶, 개발
React JS 시작! "Hello React" 본문
< 왜 갑자기 React 를?... >
React JS 를 공부를 하게되었다. (React Native 아님)
Max For Live 의 UI 를 웹 기술을 사용하여 만들어보고싶었기때문이다.
내가 이런 생각을 할수있었던 이유는 Max 8 이후부터 Node.js 를 지원하기때문이다.
한마디로 HTML, CSS, JavaScript 를 사용하여 UI 를 만들어보겠다는 이야기다.
사실 모든 M4L 개발자들은 Max 에서 제공하는 UI 를 가지고만 만든다.
이게 제일 쉽고 또, Ableton Live 와의 연동성도 가장 뛰어나기때문이다.
하지만 그만큼 나만의 멋진 디자인 또는 유니크한 기능을 만들어낼수는 없는 큰 한계점을 가지고있다.
버튼이나 슬라이더를 이야기하는게 아니다.
근사한 피아노롤을 만들수있을까? Max 기본 UI 만으로? 절대 불가능하다.
Max 8 부터 Node.JS 를 지원한다고 하더라도, 어떤 개발자도 아직
UI 를 웹 기술을 사용하여 만든 사람이 없다.
나 또한 이게 아직 100% 가능한지 모르겠고, 끝에 가서는 실패할수도있다.
짐작으로 가능할수도있다는 생각이었고.. 일단 꼭 시도해보고싶었다.
HTML 와 CSS 를 처음배워봤을때, 너무 즐겁게 UI 를 만들었기때문이었다.
참고로 Juce 로 만든 Output 의 Arcade 또한 GUI 는 React 를 사용했다고한다.
언젠가는 Juce 에서도 사용할수있는 기술이 될지 모른다. 제발 그러기를 바란다.
< React 둘러보기 : Hello World 출력하기 >
아래는 Hello World 를 출력하는 React 코드이다.
이를 위해서는 총 4가지의 파일이 필요하다.
App.css
.App {
font-size: 100px;
color: brown;
}App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
Hello World
</div>
);
}
export default App;Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('root'));Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>브라우저 콘솔
출력
위의 4가지 파일이 연동되어 Hello World 가 출력되었다.
기존의 하나의 거대한 HTML 파일 내부의 복잡함을, 여러 파일로 쪼갬으로써 가독성을 향상할수있는 패러다임을 제시한것이다.
사실 C++ 를 배우기전에 React를 살짝 봤을때는, 이걸 왜 써야하나 했었는데,
C++ 를 배우고나니 오히려 React 의 편리함을 강하게 느끼게된거같다.
파일안에 파일이, 이 파일안에 다시 파일이 들어가는 구조이다.
정리해보면 아래와 같다.
App.css -> App.js -> Index.js -> Index.html
Juce 에서 다수의 Component 파일 (.h) 들을 만들어, 하나의 Component 파일에서 로딩하는 개념과 매우 흡사하다.
물론 문법적으로는 많이 다르지만, C++ 보다는 훨씬 쉬울것이다...
개인적으로 React 를 배우고나면, C++ 에서 React 를 UI 로 사용하고,
알고리즘을 짜는 코드만 C++ 로 할수있었으면 좋겠다.
이게 잘되면 C++ 에서도 테스트해볼날이 오기를..