JavaScript React

28 Sep 2022 •

React

•

javascript
react
declarative
component-based
learn-once
write-anywhere
jsx
syntax
babel
compiler

프론트앤드 개발을 위한 JS 오픈소스 라이브러리이다.

선언형
컴포넌트 기반
범용성

1. Declarative

선언형이란 MVC Model, View Controller. 즉 HTML/CSS/JS로 나눠서 관리하는게 아니라 하나의 파일안에 명시적으로 작성할 수 있도록 JSX라는 방식으로 선언형 프로그래밍을 지향한다.

2. Component-Based

컴포넌트 기반은 구현을 위한 여러종류의 코드를 묶어둔 컴포넌트(단위)를 기반으로 개발하여, 분리 및 독립적이고 재사용이 용이하여 기능 개발에 집중할 수 있다.

3. Learn Once, Write Anywhere

범용성은 기존 프로젝트에서도 JS로 개발된 앱이라면 라이브러리 사용법만 숙지하여도 쉽게 리팩토링할 수 있고, 전 Facebook, 현재는 Meta(개인적으로는 마크형은 무섭게 느껴짐)에서 관리하는 만큼 유지보수 측면에서도 Long term을 기대할 수 있다.(Java는 Oracle이 인수하고 무너졌어요)

4. JSX

React에서 UI를 구성할때 사용하는 문법으로 JS를 확장한 문법니다.(새로운 것이다. 다른게 아니다.)

브라우저가 이해할 수 있는 JSX의 규칙에 따라 작성하여야하며, Babel(JS compiler)을 통해 JS로 컴파일된다. 화면은 컴파일이 된 후 렌더링된 다음 유저에게 보여지게(onResume) 된다.

4.1. Main Syntax

Opening tag & Closing tag NECESSARY
CSS attribute class=”className” -> JSX attribute className="className"
JS variable used in JSX -> {someValue} NECESSARY
React element name is Uppercase of First char(맞는 영어가 아닐지도 몰라요 토익점수 신발사이즈)

//React element로 컴파일됨.
const SnackBar = (props) => {
    return(
        ...
    );
};

//HTML 컴포넌트로 컴파일됨. <- 주의
const toast = (props) => {
    return(
        ...
    );
};

JSX 태그 내 JS 구문의 비교식은 조건문이 아닌 삼항연산자를 사용해야한다.(영어 작문의 한계)

const ConditionCheck = (props) => {
    return(
        {
            <section>
                { isStable ? "STABLE" : "UNSTABLE" }
            </section>
        }
    );
};

n개 HTML element 뿌릴때는 Array.prototype.map()을 사용한다.(ex: list)
- 이때 생성되는 list의 각 아이템(React element or <li>)에 key는 필수(누가 누군지 알기위한 uid) -> 안넣을 시 compiler가 warning throw
- unique id가 없을때는 배열 index로 해결할 수 도 있다.

// 머리속에 있는거 확인용으로 나머지는 만든거라 이상하코드임.
// 참고할 코드는 따로 "TODO" 표기
import * from React;
import { useState } from ReactDOM;
import friends from './friends';

const App = () => {
    const friendsData = friends.getDataFromServer();

    const [data, setData] = useState(friendsData);

    const Frined = (props) => {
        return(
            <section>
                <h2>{props.name}</h2>
                <h3>{props.mobile}</h3>
                <h4>{props.memo}</h4>
            </section>
        );
    };

    // TODO 참고코드입니다. 나머지는 무시하세요. key 없으면 warning thorw
    // Warning: Each child in a list should have a unique "key" prop.
    return(
        <div>
            <h1>Friend list</h1>
            <ul>
                data.map(friend => <Friend props={friend} key={friend.uid} />);
            </ul>
        </div>
    );
};

export App;

5. Component-Based

Component는 UI를 구성하는 필수요소로 하나의 기능을 구현하는 여러 종류의 코드 묶음이다. 혹자는 Component is React’s heart(맞어?)라고 표현했다.

컴포넌트 여러개의 조합의 완성은 Appication이다. 모든 React Application은 최소 한개의 Component를 갖고 있다. 최소 한개의 Component는 내부적으로 Root가 된다. Tree Structure와 같이 Hierarchy(계층구조)의 특성이 있다.

React에 대해 현업에 있을 때는 Web쪽에서 이런게 있더라 정도였는데 눈도 깜짝할 새 시장을 장악했다. 모바일(android)시장은 크로스 플랫폼에 대한 이야기가 한창이었고, Navtive개발이냐 Web App으로 가느냐에대한 여러가지 의견들이 분분할 시기라, 이전에도 포스팅한 내용 중 Kotlin을 배워 새로 나온 ZetPack을 적용해볼것인가? 지금의 시장을 보면 눈깜짝할 새 JS를 기본으로 깔던 프론트엔드 개발자들에 의해 react-native를 이용한 mobile 개발이 대세라고 한다. 이전 cs선생님에게도 질문을 했으나, 가볍게 무시당한 react의 수명이라는 부분에 대해서는 답변을 듣지 못하였으나. 현재 배우는 과정에서의 react의 수명은 react를 대체할 더 효율적인 방법이 나오지 않는 이상은 꽤나 시장에서 오래 살아 남지 않나라고 조심스럽게 던져본다.

참조

Babel:JS compiler