(React) 리액트 시작하기

사내 신규 프로젝트를 맡게 되어 React를 사내 서비스에 최초 도입하고자 한다.

 

Front : React 

Back-End : SpringBoot

DB : HSQLDB

 

---

(node 및 npm 선행 설치는 필수이다.) 

 

설치

먼저 React를 시작하기 위해서는 

npx create-react-app react-todo

을 실행한다.

해당 명령어는 react를 바로 사용할 수 있도록 초기 설정을 모두 진행해준다.

 

명령어를 실행하고 잠시 기다리면

"your project name"
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

과 같은 구조로 파일들이 생성될 것 이다.

README.md : React 앱에 대한 설명 파일

node_modules : npm install ~ 로 설치한 모듈들 모여있는 폴더

package.json : 프로젝트에 의존성 관리

 

index.html : 최초 로딩되는 html 파일 , 해당 파일의 <div id="root"></div> 주목!

index.js : ReactDOM.render(JSX 태그, document.getElementById("root") : 바로 위 설명한 root에 jsx 태그들이 렌더링 된다고생각하면 된다.

App.js : 보통 기본 react 프로젝트는 jsx 태그 내용에 <App></App>이 들어가 있을 것이다.

App.js의 파일 이름이 (정확히 말하면 import한 이름이) 태그 안에 들어간 것이다. 

즉 App.js는 하나의 컴포넌트이고, 이 컴포넌트가 사용된 것이다.

즉 App.js 의 내용이 root부분에 들어가(?) 렌더링 된다고 생각하면 된다.

 

컴포넌트

앞서 말한 컴포넌트에 대해 전문적인 글을 인용한뒤 필자의 설명을 붙이겠다.

 

컴포넌트는 우리가 UI를 독립적이고 재사용 가능하게 나눌 수 있게 해줍니다. 그리고 각각을 독립적으로 생각할 수 있게도 만들어줍니다. 
개념적으로, 컴포넌트는 자바스크립트 함수입니다. 컴포넌트는 임의의 props라 불리는 인풋을 받아서 화면에 무엇이 보여질지 기술(describing)하는 리액트 엘리먼트를 반환합니다.

 

무슨 말인지,, 너무 어렵다.

역시 개발자는 코드로 이야기해야 빠르지 않은가

바로 코드를 보자

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

------------------------------------

import React from 'react';

class Hello extends Component {
  render() {
  	return <div>안녕하세요</div>
  }
}

export default App;

어찌됬건 React도 java script 이기때문에 js를 다뤄봤다면 익숙하면서도 이상한 문법을 볼 수 있을 것이다.

점선으로 구분된 두 코드는 동일한 코드이다. 

첫번째로 작성된 함수형 컴포넌트가 추천된다고하니 함수형으로 진행하겠다.

(함수형 컴포넌트 vs 클래스형 컴포넌트가 궁금하신 분들은 직접 검색을 해보시길..

기회가 되면 필자도 글을 통해 다뤄보겠다)

 

위와 같은 js 파일 하나가 하나의 컴포넌트가 되고,

앞서 index.js에서 <App></App> 으로 불러온 것 처럼

Hello.js를 임포트 후 <Hello></Hello>로 집어넣으면

Hello파일의 return 부분에 있는 태그가 렌더링 되는 것이다.

 

기초적인 리액트 시작 방법을 알아보았다.

다음 글에 계속