리액트 기초 강좌 - Library Management #2

리액트 기초 강좌, 두번째

 

1. 리액트 기본 구조

 

이번 포스팅에서는 리액트에 기본 구조에 대한 설명이다. 먼저 리엑트 애플리케이션의 폴더와 파일들을 살펴보자. 

리액트는 3개 기본 폴더를 가지고 있다. 

- node_modules : javascript 패키지/라이브러리가 저장

- public: html / image 와 같은 컴파일이 필요 없는 파일이 저장 

- src : javascript 소스 파일이 저장

 

 

public 폴더를 보면 index.html 파일만 존재한다. 리액트의 기본 템플릿이 되는 파일이며, 리액트는 ID 가 root 인 컴포넌트를 찾아서 화면 구성을 다시한다. 이 부분을 Injection  이라고 부르는데, 자세한 내용은 몰라도 , id="root" 인 컴포넌트가 react 에 의해서 대치된다고 알고 있으면 된다.  

src 폴더는 javascript 소스가 저장된다. 여기에 있는 소스들은 runtime 에 컴파일되어 화면에 보여진다. index.js 파일의 소스를 보자. 

 import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

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

위 소스를 보면 리액트는 document.getElementById("root") : document 는 html 소스를 가르키며, html 에서 root 의 위치를 찾아내고, root 를 리엑트가 가지고 있는 <App /> 컴포넌트를 이용해서 렌더링한다는 의미이다.  이번 강좌에서는 여기에 있는 App 컴포넌트를 수정해서 만들면 된다. 

 

App.js 파일

import "./App.css";

function App() {
  return <div className='App'>Hello, React App !!!</div>;
}

export default App;

App.js 파일을 보면, return <div className='App'>Hello, React App !!!</div>;  가 전부인 코드이다.  그래서 전체 프로그램을 보면 index.html 에서 root 찾고, 이를 App 컴포넌트로 치환되는 구조이다. 결과적으로 웹브라우저에는 다음 화면이 표시된다. 

 

 

2. 리액트 컴포넌트

 

리액트는 컴포넌트를 생성해서 화면에 배치하는 방식이라 생각하면 쉽게 이해할 수 있다. 

출처: https://stackabuse.com/

리액트에는 두가지 타입의 컴포넌트가 있다. 클래스형 컴포넌트 와 함수형 컴포넌트이다.  함수형 컴포넌트는 다음과 같이 선언할 수 있다.  함수형 컨포넌트에서 반환하는 값이 화면에 표시된다. 한가지 중요한 포인트는 하나의 컴포넌트는 하나의 tag 만 리턴할수 있고, 하나의

tag는 하위 tag를 여러개 가질수 있다. 

 

- 함수형 컴포넌트 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

-- 올바른 사용법: <div> 아래에 하위 tags 가 존재 -- 
function Welcome() {
  return (
  <div>
  		<h1>Hello</h1>
        <h2>It is a component. </h2>        
  </div>); 
}


-- 에러: <h1>, <h2> 두개의 tags 가 반환됨 -- 
function Welcome() {
  return (
	<h1>Hello</h1>
    <h2>It is a component. </h2>
  )
}

- 클래스형 컴포넌트 

class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

 

다시 mart inventory 프로젝트로 돌아와서 컴포넌트를 생성하고 적용해보자. 현재 리액트 추세는 함수형 컴포넌트를 사용하고 있어서 이번 예제에서는 함수형 컴포넌트를 사용할 예정이다. src 폴더 아래에 SysInfo.js 파일을 생성하고 다음과 같이 작성한다. 

 

<SysInfo 컴포넌트>

function SysInfo() {
  return (
    <div>
      <h1>Mart Inventory Management</h1>
      <h2>Manage all items: create, search and delete.</h2>
    </div>
  );
}

export default SysInfo;

외부의 다른 컴포넌트에서 SysInfo 를 사용하기 위해서는 export 를 해주어야 접근이 가능하다. App 컴포넌트에서 SysInfo 를 호출하고 화면에 적용한다.  

import "./App.css";
import SysInfo from "./SysInfo";

function App() {
  return (
    <div>
      <SysInfo />
    </div>
  );
}

export default App;

결과 화면을 다시 보면 다음과 같이 표시된다. App 에서는 SysInfo 컴포넌트만 표시되고 있는 것을 볼 수 있다. 

컴포넌트를 사용하는 이유는 재사용이 쉽다는 것이다. 만일 SysInfo를 여러번 사용할 필요가 있다면 컴포넌트를 한복해서 사용하면 된다. 

import "./App.css";
import SysInfo from "./SysInfo";

function App() {
  return (
    <div>
      {/* 컴포넌트 재사용 */}
      <SysInfo />
      <SysInfo />
      <SysInfo />
    </div>
  );
}

export default App;

예제 : SysInfo 재사용

 

 

3. React JSX

JSX (JavaScript Syntax Extension  and occasionally referred as JavaScript XML) is a React extension to the JavaScript  language syntax[1] which provides a way to structure component rendering using syntax familiar to many developers.  - wikipedia - 

JSX는 리액트에서 사용하는 javascript XML 형식으로 리액트 컴포넌트 동적으로 렌더링하는데 많이 사용된다. 다음 예시에서는 showTitle 값에 따라 SysInfo 컴포넌트 결과가 달라진다. JSX 를 이용하면 동적으로 화면을 구성할 수 있다. 

function SysInfo() {
  const title = "Book Management system";
  const showTitle = true;
  if (showTitle) {
    return (
      <div>
        <h1>{title}</h1>
        <h2>Manage all books: create, search and delete. </h2>
      </div>
    );
  } else {
    return (
      <div>
        <h1>No title</h1>
      </div>
    );
  }
}

export default SysInfo;

 < showTitle : true > 

< showTitle : false > 

 4. Props (Default Props  / props types ) 

출처: https://bosctechlabs.com/

 

Props 란? 리액트에서 컴포넌트를 호출하면서 전달해 주는 값을 의미한다. 앞에서 만든 SysInfo 에 props 을 적용해 보자. title 정보를 받아서 SysInfo 에서 출력하도록 수정한다. 

App.js

SysInfo.js

System Infomation 의 title 정보를 받아서 화면에 보여준다. SysInfo 컴포넌트 호출시 title infomation 을 동적으로 할당할 수 있는 장법이 된다. 

 

만일 SysInfo 호출시에 title 정보가 없다면 Default props 정보를 이용해서 보여준다. Default props 는 다음과 같이 지정한다. 

No Props

props 를 { title = "Book" } 처럼 선언하게되면, Sysinfo 컴포넌트 호출시 title 정보가 있으면 사용하고, title 에 대한 값이 전달되지 않는 경우 default value ("Book")를 사용한다. 이를 default props 라 부른다. 

Props 는 상위컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용한다. 그렇다면 하위 컴포넌트에서 값을 상위컴포넌트로 전달하고자 한다면 react 에서는 어떤 방법을 사용할까요?  리액트의 props 는 한번 선언되면 변경이 불가능한 변수이다. 그래서 값을 상위 컴포넌트로 전달하기 위해서 Events 를 이용한다.  자세한 내용은 다음 포스팅에서 다룰 예정이다. 

---

끝..