React의 주요 개념과 사용법

이번 주는 React에 대해서 공부했다. 

정말 처음 시작이 너무 어려웠지만 며칠 동안 고생한 덕에 이제 조금은 이해가 간다.
오늘은 정리 및 복습을 위해 블로깅을 해볼까 한다.

왜 리액트(React)가 등장했는가?

웹 사이트가 점점 커지면서 사용자와 인터렉션이 많아져 관리해야 할 DOM 역시 많아지게 되었다. 이러한 상태 관리를 최소화하면서 기능 개발에만 충실하기 위해서 리액트가 고안되기 시작하였고 지금의 리액트 라이브러리가 등장하게 되었다.

그럼 리액트는 무엇인가?

React란 Component라는 개념에 집중하고 있는 JavaScript 프론트앤드 라이브러리이다.
여기서 Component란 기능 개발을 중심으로 사용하기 위해 나온 하나의 의미(기능)을 가진 독립적인 단위 모듈이다.
Component를 통해 나만의 태그를 만들 수 있게 되고 코드의 직관성과 재사용성이 올라가 웹에서 기능 개발을 중심으로 하는 것이 가능해졌다.

이제 리액트의 기본 개념을 알았으니 사용방법에 대해서 알아보겠다.

리액트를 처음 시작할 때는 명령어로 리액트 앱을 선언해야 한다.

npx create-react-app [프로젝트명]

그리고 프로젝트 경로로 이동해준 다음 yarn start 명령어로 프로젝트를 실행시켜 주면 된다. 
(node 또는 yarn을 사용하기 때문에 둘 다 깔려 있거나 둘 중 하나는 반드시 깔려 있어야 한다.)
만약 설치를 하지 않았거나 설치할 수 없는 상황이라면 codesandbox.io 를 추천한다.
설치 없이 간단한 리액트를 테스트해볼 수 있다.

그러면 로컬 호스트의 3000번 포트로 서버가 실행되고 리액트 앱이 실행된다. 

처음 실행시 뜨는 화면

그럼 이제 App.js로 가서 코드를 수정해주면 된다. 

import React from 'react';
// React 컴포넌트를 만들기위해 불러오기

function App() {
  return ( // 반드시 하나의 테그로 모든 엘레먼트를 감싸줘서 리턴해주기
    <div>
		<h1>Hello World</h1>
    </div>
  );
}

// 모듈화를 위해 내보내줄 컴포넌트
export default App;

 

리액트는 기본적으로 JSX 문법을 리턴해주어야 한다. JSX는 JavaScript의 확장 문법으로 html과 비슷하게 생겼다.
(JSX 문법을 사용하지 않고 만든다면 코드량이 길어지는데 JSX문법으로 코딩을 하면 babel이 알아서 변환해준다.)

JSX 문법을 사용할 때는 몇 가지 규칙이 존재한다.

• 반드시 하나의 엘리먼트로 감싸 져야 한다.
  (만일 여러개의 컴포넌트를 리턴시키고 싶다면 <> 빈 태그안에 넣어줘도 된다! Fragments 참조)
• JSX 문법의 내부에서 JavaScript 코드를 사용한다면 { } 안에서 작성해야 한다.
• JSX 내부에서는 if 문을 사용할 수 없으므로 삼항 연산자를 추천한다.
• 엘리먼트의 클래스 이름을 지정할 때는 ES6문법과 겹치지 않게 className = "" 으로 사용해야 한다. 

 

이제 index.js 를 보면 화면에 렌더링 해주는 것을 볼 수 있다.

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

 

간단하게 리액트의 개념과 사용법을 익혀보았다. 
다음 글에서 컴포넌트에 대해서 더 다뤄볼까 한다.