본문 바로가기
개발공부일지/React

React - React 기본사항 알아보기

by Hynn1429 2023. 2. 22.
반응형

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 이제 NodeJS 를 지나 React 의 기초를 알아보는 포스팅을 작성해보도록하겠습니다.

실제 Front-End 개발자들이 가장 많이 사용하는 Stack이기도 한 React, 어떠한 특징을 가지고 있는지 자세히 살펴보도록 하겠습니다.

 

==========

==========

 

React 는 Facebook, Instagram 으로 우리에게 친숙한 회사인 Meta 에서 개발한 JavaScript Library 입니다.

React 는 JavaScript 기반에서 동작하는 Library 로서, 몇가지 특징이 존재합니다.

그 특징을 간략하게 정리해보도록 하겠습니다.

 

 

처음 학습할때, 웹 사이트의 일부 사이트는 Library, 일부는 Web-Framework 로 소개하기도 하였습니다.

실제 예시를 발췌하면 아래와 같이 다르게 기재된 곳들이 일부 있어, 혼동이 발생할 수도 있습니다.

하지만 React 는 구조상이나, 공식적으로 "Library" 입니다.

React 를 WebFramework 로 소개하고 있는 예시

항상 어떠한 기술문서, 자료의 대한 우선순위는 제조사/개발자가 배포한 공식자료가 1순위로 신뢰되어야 합니다.

React 는 공식홈페이지에서도 "JavaScript Library" 로 소개하고 있습니다.

이를 이해하기 위해서는 Library 와 Webframework 의 차이를 이해해야 합니다.

 

아래와 같은 특성을 이해한다면, 이후에 사용하게 될 Library, Web-framework 의 대한 이해가 가능할 것으로 생각됩니다.

 

먼저 Library의 특성은 아래와 같이 정리가 가능합니다.

  • Library
  • 특징1) Library 는 code 를 모아둔 것으로, Program, Application 에서 사용할 수 있는 기능/도구를 제공
  • 특징2) 필요한 Libaray 를 가져와서 자신이 작성하는 코드에 "포함"을 시킬 수 있습니다.
  • 특징3) 자신의 코드에 Library의 metohd, function 을 "호출"하여 구현할 수 있습니다.

반면, Web-Framework 는 아래의 특성을 따릅니다.

  • Web-Framework
  • 특징1) Library 보다 더 큰 개념으로서, Application 을 제공하는데 필요한 모든 요소를 제공합니다.
  • 특징2) Framework 는 기본 구조를 정의하고 있고, 미리 정의된 규칙과 틀에 따라 코드를 작성해야 하는 강제성이 존재합니다.
  • 특징3) 따라서 개발자는 Main-Logic 에만 집중하여 코드를 작성합니다.

즉, 나의 Code 가, 정해진 형식으로의 작성을 강제하는지, 규칙이 엄격한지에 대한 이해가 존재한다면, Library/Web-Framework 의 대한 이해는 어렵지 않게 이해가 가능합니다.

React 는 이러한 강제성이 존재하지 않기 때문에, "Library"가 맞습니다.

 

React 의 특징이기도 한 것은, React 를 사용하여 UI Component 를 생성하고, 상태를 관리하는 요소적 측면도 존재하지만, 이 와중에도 다른 Library, Tool 을 사용하여 Application Feature 의 다른 측면을 처리할 수 있기 때문입니다.

 

 

이 Declarative Programming 이라고하는, 선언적 프로그래밍은, 프로그램이 동작하는 과정보다, 어떻게 목표를 달성해야하는지에 대한 중점을 가진 방법입니다.

하지만 React 에서 말하는 "선언형" , Declarctive 의 의미는, 개발자가 UI가 어떻게 보여아하는지를 정하고, 상태가 변경될 때 마다 UI를 업데이트 하는것을 의미합니다.

 

즉 React 에서는 개발자가, 어떻게 UI를 상황에 따라 보이도록 할지에 대해 Component 를 작성해야 합니다.

이를 통해, 상태(State)가 변경되면, React 는 자동으로 UI 를 업데이트 함으로서, 새로운 상태를 반영하도록 설계되었습니다. 

이때의 장점은 개발자가 UI를 명시적으로 업데이트 하기 위한 코드를 작성할 필요 없이, Application의 논리(Logic)에만 오롯히 집중할 수 있도록 도와줍니다. 여기서 React 가 Application 과 UI 간의 관계를 선언적으로 설명하는 방법을 제공하기 때문에, "Declarative" 라는 선언형이라는 특징을 갖습니다.

 

즉, React 에서 선언형이라는 것은 코드를 모듈화(Module)하기 때문에, 작성된 코드를 이해하기 더 쉽게할 뿐 아니라, 오류를 방지하는데 도움이 됩니다. 개발자가 UI의 세부사항을 관리할 필요가 없어지도록 도와주기 때문입니다. 

 

이를 위해 React 에서는 JSX라는 문법을 사용하여 구현합니다. 

JSX(JavaScriptXML) 의 약자로, JavaScript 의 확장문법입니다. React 에서는 JavaScript와 HTML 을 결합한 문법으로 생각하시면 더 이해하기 쉬울 겁니다. 이후에 이에 대한 추가적인 설명도 있으니, 참고하시면 좋을 거 같습니다.

 

먼저 선언형 으로 React Component 를 간단하게 작성해보도록 하겠습니다.

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

JavaScript 문법 내에 "return" 으로 HTML 이 왔지만, 이전에는 H1 내의 nunjucks 같은 Library 를 이용했다면, React 는 "Props" 라는 객체를 인자로 받아들여 화면에 표현하는 동작방식을 가지고 있습니다.

즉 이 Component 를 사용하는 코드는 아래와 같이도 작성할 수 있게 됩니다.

 

이를 이제, React 로 구현하면 아래와 같이 HTML 내에서 간단하게 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function Hello(props){
            return <h1>Hello, {props.name}</h1>
        }
        ReactDOM.render(<Hello name="world" />, document.getElementById('root'))
    </script>
</body>
</html>

추가적인 요소에서 "Babel" 은 뒤에서 별도의 설명을 드리도록 하겠습니다. 

 

 

React 에서 가장 중요한 개념이기도 한 Component 는 이미, JavaScript 에서 생성자 함수로서 사용해 본 경험이 있습니다.

MVC Pattern을 사용할 때도, Repository, Service, Controller 에서 Class 생성자를 사용해서 재사용 가능한 Code 를 작성한 바 있습니다.

실제 JavaScript 에서 작성한 class 는 아래와 같은 형태로 작성했습니다. 

 

JavaScript - class example

class UserRepository {
    constructor({ User, sequelize, Sequelize }) {
        this.User = User
        this.Board = sequelize.models.Board
        this.Comment = sequelize.models.Comment
        this.Liked = sequelize.models.Liked
        this.sequelize = sequelize
        this.queryTypes = Sequelize.QueryTypes
        this.Sequelize = Sequelize
    }

    async hotValue() {
        try {
            const userHot = await this.User.findAll({ order: this.sequelize.literal("userPoint DESC"), limit: 3, raw: true })
            return userHot
        } catch (e) {
            throw new Error(e)
        }
    }
}

module.exports = UserRepository

반면 React 에서는 이 Component 를 보다 구체적으로 사용합니다.

즉 UI(사용자 인터페이스), 재사용 가능한 Code-Block 으로 구체적으로 명시하고 있습니다. 

이를 통해 React 를 사용하면 보다 구체적으로 UI 를 단위로 더 작고, 관리가 가능한 모듈로 분해하여 작성할 수 있습니다. 이 Component 를 이용하면, "Button" 이나, "아이콘"과 같은 작고 간단한 요소 뿐 아니라, 크게는 "회원가입", "댓글 작성"과 같은 Form 같이 보다 크고 복잡한 요소까지 다양한 방법으로 작성이 가능합니다. 

 

즉, JavaScript 에서의 Component 와, React 의 Component 는 아래의 특징과 차이점을 가지고 있다고 할 수 있습니다.

 

JavaScript의 Component 

  • 특정 기능을 수행하는 코드를 작성
  • 재사용 가능한 Code-Block

 

React Component

  • User Interface(UI) 의 일부 및 요소를 구체적으로 표현
  • 재사용 가능한 Code-Block

따라서, React 에서의 Component 가 갖는 역활은 아래와 같다고 할 수 있습니다.

 

  1. 재사용, 구성이 가능하도록 설계
  2. 동일한 Application, 다른 Application 에서 여러번 사용하여 일관된 UI 를 만들 수 있음
  3. Tree 구조를 이용해서 Component 간의 결합이 가능

이를 통하면, React Component 는 확장에 용이할 뿐 아니라, 유지 보수에도 용이한 사용자 인터페이스를 개발하기 위한 중요한 Block d요소라고 할 수 있습니다.

위에서 언급한 Tree 구조는 별도의 포스팅을 할 예정입니다.

 

 

위에서 잠시 예제에 등장한 Babel 은, JSX 문법을 React 에서 사용할 때, 같이 활용하는 Trasnpiler 입니다.

아마도 위의 예시코드를 사용하였을때, Head 에 있는 CDN 의 3번째인 "babel" 을 주석처리하면, 오류를 경험하게 될 겁니다.

위의 예시코드는 HTML 과 JavaScript 를 분리하지 않고, Script 내에 JSX 문법을 이용하여 작성을 했습니다.

즉, HTML 파일 내부에서 JSX 문법을 사용하면, Browser 는 이를 "JavaScript" 문법으로 인식하지 못하고, 문법 오류를 발생시키기 때문입니다.

 

이럴때, React 와 같이 사용되는 "Babel" 은 꽤나 자주 사용하게 될 CDN 이기도 합니다.

Babel 을 사용함으로서 개발자는, 최신 기능과 문법을 사용하여 코드를 작성하면, 이를 지원하지 않는 브라우저에서도 코드가 올바르게 실행될 수 있도록 도와주는 "Tool" 입니다. 

 

즉, React 를 사용하여 최신 JavaScript 코드를 작성하여, 위에서 언급한 개념인 "선언형", "Component" 기반으로 구축을 하면서 JSX 문법을 사용하면, Babel 은 이를 표준 JavaScript 코드로 변환하여 브라우저에서 호환성 문제가 발생하지 않도록 돕는 Transpiler 라고 이해하면 쉽겠습니다.

 

다음 포스팅부터는, 각각의 개념중 JSX, Component에 대해서만 따로 다루는 포스팅을 작성할 예정입니다.

 

다음 포스팅에서 뵙겠습니다.

감사합니다.

반응형
저작자표시 비영리 동일조건

'개발공부일지 > React' 카테고리의 다른 글

React - 이벤트 처리하기  (0) 2023.02.27
React - 생명주기(Life Cycle) 및 State 알아보기  (0) 2023.02.27
React - Component & Props 이해하기  (0) 2023.02.24
React - Element 단위 이해하기  (1) 2023.02.23
React - JSX 문법 기초 이해하기  (0) 2023.02.23

관련글

댓글

티스토리툴바