Start React

zzwwoonn·2021년 7월 23일

목록 보기

1/23

오늘의 주제는 ✌️

React 란 무엇인지, 정의와 특징에 대해 간단히 정리하고 !!
처음에 어떻게 시작하는지 셋팅법과 실행까지 간단하게 설명해보려고 합니다.
재밌게 봐주세요 🖤

본격적으로 리액트에 대해 알아보기 전에 !!
웹 공부를 처음 시작하는데 ,,, 어떻게 시작해야하나 ? 너무 막막하다. 아무것도 할 줄 모른다. 무지성으로 머리부터 박아본다. 못할건 없다. 하면 된다. 살짝 무섭기는 하지만 ? 일단 해보자 🔥

React 란 무엇인가 ...!

React 는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

출처 : 위키백과

React 는 facebook에서 제공해주는 프론트엔드 라이브러리이다.
싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용된다.
현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 가장 인기있는 라이브러리이다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

왜 리액트를 쓰는데 ??

만약 부대찌개를 만들고 싶다고 가정하면, 필요한 재료를 하나 하나 사는것 보다는 모든 재료가 다 들어가있는 (or 포장되어있는) 것을 사는게 훨씬 효율적이다. 별도의 과정 없이 가져와서 바로 끓이기만 하면 되기 때문이다.

패키지 개념, 이게 바로 프레임워크이다. 프레임워크는 이미 구조화, 세팅이 되어있는 상태이고 사용자는 살만 붙이면 된다. 개발을 보다 쉽고 간편하고 효율적으로 할 수 있게 된다.

SPA (Single Page Application) 구현에서의 프론트엔드의 프레임워크에는 Angular, React, Vue.js 가 있고 언어는 JS로 되어있다. 외국에서는 불 포켓몬(빨간색), 물 포켓몬(파란색), 풀 포켓몬(초록색)으로 불린다고 한다 🥸

React의 특징

React의 특징은 크게 다음과 같다.

Data Flow
Component 기반 구조
Virtual Dom
Props and State

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 한다.

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.

React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

위와 같이 Header, Footer같은 구조등을 컴포넌트로 만들고, 이를 조합해서 root component를 만드는 방식이다.

3. Virtual DOM

먼저, DOM은 Document Object Model의 약자이다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

Virtual DOM은 가상의 Document Object Model을 말한다.

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 한다.

4. Props and State

Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
쉽게 읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고, props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

백번 책을 읽는것 보다 한번 보는게 더 효율적일수 있다.

직접 리액트를 실행해보자 !!

첫 번째, Node.js 설치하기

Node.js 홈페이지에서 가장 최신 버전으로 다운로드 받는다. ( 최신 버전이 아닐시엔 오류가 뜰 가능성이 높다고 한다. 무조건 숫자 높은 최신버전 받자 !!)

두 번째, 에디터 설치하기

코드 수정(편집)을 위한 에디터를 설치한다. ( Visual Studio Code )

터미널을 안다뤄봤다 => 터미널을 쓰기 좋은 vscode 추천 !!

맥 쓰시는 분들 참고 !!

세 번째, 작업 폴더 만들기

작업폴더를 만들어주고 VsCode 에서 Open Folder(폴더 열기)를 통해 작업폴더를 열어준다. 왼쪽 상단의 탐색기에 작업폴더명이 뜨면 된다.

네 번째, React 프로젝트 생성하기

하나하나 만들어주는게 아닌 마법의 명령어를 통해 프로젝트를 생성한다.
터미널에 다음과 같이 입력을 해준다.

npx create-react-app 프로젝트명

npx => 라이브러리 설치를 도와주는 명령어 (node.js 가 설치가 잘 되어있어야 사용가능)

create-react-app => 리액트를 생으로 만드는게 아닌, 리액트 셋팅이 다 되어 있는 boilerplate 만들기 쉽게 도와주는 라이브러리

이렇게 해주면 리액트 프로젝트 설치 완료 !

다섯 번째, 코드짠거 미리보기

열심히 코드를 짰다면 확인을 해봐야한다. 아래의 명령어를 터미널에 입력한다.

주의 할 점 !!
터미널에 본인이 지정한 폴더명이 떠야한다. 본인이 지정한 폴더명이 뜨지 않았다면, Open Folder (폴더 열기)가 제대로 되지 않은것 이므로 다시 열어주어야 한다.

npm start

위와 같이 나온다면 성공 !!
중간에 문구는 App.js 에서 P 태그 안의 내용을 고쳐주면 된다 🤓

zzwwoonn

다음 포스트

Component, Props

1개의 댓글

henu

2022년 10월 31일

돌아와요

답글 달기