React 연구실

Slog (미니 블로그)
1

안녕하세요. :smile:

제가 요즘 React를 하게 되어 열심히 일하며 배우고 있습니다.
더군다나 인터넷이 차단되어 있는 환경에 처하다 보니 슬로그를 적극 활용해야겠다는 묘수가 떠올랐습니다. :smile:

두서 없이 React에 관한 배움의 과정을 기록하는 것이 목표입니다.


읽어주셔서 감사합니다!

image

image


image

6개의 좋아요
2

10분만에 리액트 시작하기

  1. 비주얼 스튜디오 코드 설치
  2. node.js 설치
  3. 리액트 프로젝트 생성
  4. 리액트 웹사이트 실행(구동)

1. 비주얼 스튜디오

다운로드 설치하기

2. 노드 (node.js)

다운로드 설치하기

3. 리액트 프로젝트 생성

cmd, powershell, terminal, visual studio code, node 등에서 아래 명령어를 실행합니다.

> npm create-react-app myProject

또는

> npx create-react-app myProject

4. 리액트 웹사이트 구동

생성한 프로젝트 위치에 접근하여 아래 명령어를 실행합니다.

npm start

image

정상 구동된 리액트 웹사이트 입니다. :smile:

그리고 아래 리액트 소개 글도 준비했으니 한번 읽어보시기 바랍니다.

감사합니다. :smile:

1개의 좋아요
3

리액트 유저컨트롤 만들기

리액트에서는 Component 라고 지칭하지만 유저컨트롤 이라 부르는 것이 저는 더 좋으니까, 어떻게 부르든 상관없을 것 같습니다.

기본 사용 방법부터 시작하기에는 인내심이 부족합니다.
아래는 흥미를 돕기 위해 준비한 코드입니다.

리액트가 웹을 얼마나 재미있게 하고 있는지 볼까요??

Title 유저컨트롤 만들기

프로젝트/src/usercontrols/Title.js

import React from "react";

export default function Title() {
    return (
        <div>
            Dotnet DEV
        </div>
    );
}

참조 부분은 마치 Python을 연상케도 하는군요.

from selenium import webdriver

그리고 갑자기 궁금해서 dJango도 React와 비슷할지 확인해 봤는데 안 비슷해 보입니다.


다시 돌아와서 제가 만든 Title 유저컨트롤을 실행해보겠습니다.

프로젝트/src/App.js

import React from "react"
import Title from "./Title"

export default function App() {
    return (
        <div>
            <Title/>
        </div>
    );
}

물론 동작을 하기 위해 필요한 많은 부분들을 은근슬쩍 생략했지만,
핵심은 script 코드와 html이 결합된 구조라는 것을 나타내기 위한 목적입니다.

리액트 본인도 스스로 재미있다고 생각하는 것 같네요.

This funny tag syntax is neither a string nor HTML.
이 재미있는 태그 구문은 문자열도 HTML도 아닙니다. - 리액트


계속해서 코드를 살펴보면,

이런 것도 가능합니다.

import React from "react"
import Title from "./Title"

var element = <h1>hello Dotnet DEV</h1>

export default function App() {
    return (
        <div>
            <Title/>
            {element}
        </div>
    );
}

element 변수를 잘 보면 일반 string이 아니라 <h1/> 그 자체입니다.


그리고 더 신기한 것은,

element를 Title에 보낼 수도 있습니다.

<Title ele={element}/>

그럼,

Title에서는 값을 어떻게 받을까요?

export default function Title(prop) {
    return (
        <div>
            Dotnet DEV
            {prop.ele}
       </div>
    );
}

생각처럼 유연하게 잘 넘어갑니다.
본문에서 언급 드린 것처럼 많은 부분들을 생략한 설명인 점 이해해주시기 바랍니다.

감사합니다. :grinning:


끝으로 JSX 설명도 한번 읽어보시기 바랍니다.

왜 JSX인가?

React는 렌더링 로직이 본질적으로 다른 UI 로직과 결합되어 있다는 사실을 받아들입니다. 이벤트 처리 방식, 시간 경과에 따른 상태 변경 방식, 데이터 표시 준비 방식 등입니다.

마크업과 로직을 별도의 파일에 넣어 인위적으로 기술 을 분리하는 대신 React 는 두 가지를 모두 포함하는 "구성 요소"라고 하는 느슨하게 결합된 단위로 우려 를 분리 합니다. 다음 섹션 에서 구성 요소에 대해 다시 다루 겠지만, 아직 JS에 마크업을 넣는 것이 익숙하지 않다면 이 강연 을 통해 다른 방법으로 설득할 수 있을 것입니다.

React 는 JSX를 사용할 필요가 없지만 대부분의 사람들은 JavaScript 코드 내에서 UI로 작업할 때 시각적 보조 수단으로 도움이 된다고 생각합니다. 또한 React가 더 유용한 오류 및 경고 메시지를 표시할 수 있습니다.

JSX 설명 원문 보기

2개의 좋아요
4

복잡하고 지저분한 프로젝트 정리하기

.vscode/settings.json 파일을 통해 제외할 폴더 또는 파일을 지정할 수 있습니다.
제외 대상은 물리적으로 지워지는 것이 아니라 vscode 탐색기 내에서 보이지 않게 됩니다.

특히 React 프로젝트 구성을 보면..
거의 직접 사용하지 않으면서 생성된 폴더나 파일이 많기 때문에 여간 신경이 쓰입니다.

제거 방법 및 대상

취향대로 하면 됩니다.
저는 node가 설치되는 폴더와 package, .gitignore 같은 기본 루트에 널부러져있는 항목들 위주로 제외합니다.

{
    "files.exclude": {
        "**/node_modules": true,
        "**/package.json": true,
        "**/package-lock.json": true,
        "**/.gitignore": true
    }
}

간단하게 전과 후 비교 사진도 확인해볼까요?

제외 전 제외 후
image image

이런 방식으로 가꿔나가면 프로젝트 구조를 잘 정리해가면서 확장하는데 큰 도움이 되는 것 같습니다.

읽어주셔서 감사합니다. :smile:

2개의 좋아요
5

클래스 vs 함수

리엑트는 클래스와 함수를 통한 개발 구조 방식을 선택할 수 있습니다.

:round_pushpin: 두 방식은 방식이 다를 뿐 동일한 결과를 나타냅니다. (방식의 차이 :laughing:)


클래스

리엑트에서의 클래스 방식의 개발 문법은 C#이나 Java같은 객체지향 개발 방식과 아주 비슷합니다. 특히 문법적으로는 Python과도 거의 같습니다. 인스턴스 객체에 친숙한 개발자라면 더욱 더 친숙하게 다가갈 수 있겠네요.

:round_pushpin: 하지만 클래스 방식은 리엑트의 고전 방식이기도 합니다. 참고로 최근의 리엑트는 함수(Functional) 방식 개발을 더 선호합니다. 클래스는 살짝만 살펴볼게요!

클래스 방식의 컴포넌트 구조 형태입니다.

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

React.Component 클래스를 상속받는 것이 클래스 기반의 기본 컴포넌트의 시작입니다.

함수

함수형(Functional) 기본 컴포넌트 구조 형태입니다.

export default JamesButton(props) {
    
    return (
        <div></div>
    );
}

TBD…

[팁] - 리엑트에 대해 검색하면 보통 class 구조 방식의 소스코드나 설명들이 주로 검색됩니다. 이 때 functional 키워드를 이용하여 검색하신다면 함수형 검색결과를 손쉽게 찾으실 수 있습니다.

TBD…

1개의 좋아요