꾸준히 개발하기

리액트 프로젝트를 시작하는 가장 쉬운 방법은 create-react-app을 사용한 방법이리라 생각된다.

계속하여 최선 버전으로 업데이트되도록, npx 명령어를 사용하여 생성한다.

// npx create-react-app *myapp
npx create-react-app test

*myapp 자리에 원하는 프로젝트 명을 적고 실행하면, 입력한 프로젝트 명으로 폴더가 하나 만들어져 있다.

해당 폴더를 실행하면, localhost:3000 으로 가장 기본적인 react 페이지가 뜬다.

여기서 이제 src폴더 내에서 App.js index.js index.css 를 제외한 파일은 다 지우고 프로젝트를 시작했다. 당장은 필요없기도 하고, 많은 리액트 강의에서도 다 지우더라!

index.js 파일을 열어보면 다음과 같다. (버전별로 차이는 있지만 신경X)

import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

리액트 자체는 js의 확장판이기 때문에, 기본적으로 js 문법을 따라간다. 다만 기본 js에서는 지원하지 않는 문법이 위 파일에서 2개 보인다.

import './index.css' <- 보통 js 파일에서는 위와 같이 import하지 않는다. 

<App /> <- js 코드 내의 HTML 코드이다. (JSX)

위와 같이 React가 도입한 문법은, npm run 명령어를 통해 실행되어, 개발자가 원하는 방향대로 화면에 뿌려진다. 원래대로라면 작동하지 않을 문법이 react로 인해, 브라우저로 전달되기 전 transform 되어 원하는 모습을 보여주는 것이다. 

그리고 또 하나 기억해야 할 것은, index.js 파일은 가장 먼저 실행되는 파일이라는 것이다. 

index.js가 최종적으로 실행하는 것은 다음이다.

ReactDOM.render(<App />, document.getElementById('root'));

App이라는 것은 위에서 App.js를 import했으므로, 이전에 소개했던 component이다. 

(third-party library나 js파일을 import할 때는 뒤의 확장자를 빼고 import한다)

document.getElementById('root')

리액트는 기본적으로 single-page-application이다. 즉, 하나의 페이지 안에서 전부 동작한다는 것이다. 유저에게 보여지는 파일은 여러개의 html로 이루어진 것 같지만, 실질적으로 리액트는 하나의 페이지만을 갖고 있다. 라우팅과 같은 부차적인 기능을 통해 다른 html로 이동하는 듯한 착각을 심어주는 것이다. 

따라서 root id를 가진 document는 어디 있느냐하면, public폴더 내의 index.html을 보면 찾을 수 있다.

(public 폴더는 잘 접근할 일은 없지만, index.html이 이곳에 있다)

따라서 우리는 App이라는 이름의 component를 root div 내에서 실행하는 것이다. 

(App.js는 다른 component와 달리, index.js에서 실행되는 root component이다. 추후 여러개의 component가 등장하더라도, App.js 내에서 nested 될 것이다)

우선 가장 기본적인 문장을 띄우도록 App.js를 작성해보았다.

function App() {
	return (
    	<div>
        	<h2>Hello, world!<h2>
        </div>
    );
}

export default App;

js 내에서 html 코드를 return하는 형식은 처음 보면 굉장히 낯선 광경이다. 이 문법은 react에 도입된 문법으로, JSX라 불린다. 이는 react가 npm start로 실행되면서 브라우저에 전달될 때는 transform하여 전될되는데, 구체적으로 어떻게 변하는지 보고싶다면 해당 리액트 프로젝트를 시작한 후 개발자 도구의 source 파일을 보면 된다. 위에서 적은 js와는 사뭇 다른 코드가 보일 것인데, 이는 리액트가 JSX를 transform하여 브라우저에 전달한 결과이다. 

기본적인 js와 달라 혼란스러울 수 있지만, 개발자에게 더 편한 환경을 제공해주는 것이므로 금방 익숙해지는 것이 좋다!

기본적인 js 문법과의 차이를 한번은 짚고 넘어가는 것이 좋을 것 같아 추가한다.

function App() {
	return(
		<div>
    		<h2>Hello world!</h2>
        	<p>my cat is rockstar</p>
    	</div>
    );
}

위의 App.js 파일에서 p 태그 하나를 추가하고 싶으면 기본 리액트 문법은 위와 같이 작성하면 된다. 하지만 기본 js 문법에 따르면 다음과 같이 작성해야한다. (imperative approach로, js에게 명료하게 하나하나 어떻게 해야할지 전달)

function App() {
	const paragraph = document.createElement('p');
    paragraph.textContent = 'my cat is rockstar';
    document.getElementById('root').append(paragraph);
	return(
		<div>
    		<h2>Hello world!</h2>
    	</div>
    );
}

단순히 코드만 봐도, 리액트가 좀 더 짧고 간결하다. 

서론

React 자체를 너무 어렵게 접근할 필요는 없다. 리액트는 UI를 보다 쉽게 개발할 수 있도록 도와주는 자바스크립트 라이브러리다. 물론 Html, css, js로도 UI를 만들 수 있으나, 리액트를 사용하면 component라는 개념 덕분에 코드가 훨씬 깔끔하고 구현 난이도가 내려간다. 

Component란 무엇인가?

쉽게 말하자면, UI 상에서 다시 사용할 수 있는 building block이다. 단순히 표시해줘야하는 데이터만 바뀌고 UI는 그대로라면, 굳이 여러번 동일한 코드를 반복해서 작성할 필요 없이, 하나의 block을 만들고, 그 안의 데이터만 넘겨주는 방식이다.

Component 자체는 쉽게 말하자면, Html+js (+ css) 덩어리다. (css를 괄호처리한 이유는 리액트 상에서는 크게 중요한 개념이 아니라서다.) 각각의 UI 상에서 모든 걸 쪼개서 component로 구성할 수도 있다. 따라서 개발자는 UI를 구성하는 모든 요소를 쪼개서 component로 만든 뒤, 최종적으로 어떻게 UI를 그릴지 React에게 구성도를 던져주기만 하면 된다. (재사용성에 너무 집착할 필요는 없다.) 

Component 단위의 구성은 개발자에게 Reusability & Separation of Concerns를 제공한다.

불필요한 코드의 반복도 없고, 한 곳에서 지나치게 많은 요소를 관리할 필요도 없다. 각각의 component는 자신이 수행해야 하는 하나의 목표만 집중하면 되는 것이다.