이 글은 리액트의 기본 개념을 알고 개발환경을 설정하는 글입니다.🙂‍↕️

먼저 개념에 대해 알아보겠습니다.

📖 리액트(React)란?

정의 : 리액트(React)는 사용자 인터페이스(UI)를 구축하기 위한 오픈소스 JavaScript 라이브러리입니다.

📌 페이스북(메타)에서 개발되었으며, 2013년에 공개되었습니다.

• 리액트는 컴포넌트 기반 아키텍처를 채택하여, UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 개발할 수 있게 합니다.

• 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화

• 단방향 데이터 흐름을 통해 데이터 관리를 용이하게 하는 특징을 가지고 있습니다.

• 웹 애플리케이션의 프론트엔드 개발, 특히 싱글 페이지 애플리케이션(SPA)에 많이 사용된다. - React Native를 통해 모바일 앱 개발에도 활용됩니다.

• JavaScript와 HTML을 섞은 JSX 문법은 처음 접하는 개발자에게 익숙해지기 어렵다.

• 리액트가 빠르게 발전하며 새로운 기능과 API가 추가되므로, 이를 따라가기 위해 지속적인 학습이 요구

이렇게 개요와 특징에 대해 알아보았습니다. 이제 특징에 대해 조금 더 구체적으로 설명하겠습니다.🏃

컴포넌트 기반 아키텍처

컴포넌트: 독립적인 UI 조각

모듈성과 재사용성

• 각 컴포넌트는 독립적인 UI 조각으로, 복잡한 애플리케이션을 작은 부분으로 나눌 수 있습니다.
• 객체지향 프로그래밍의 주요 특징으로 소프트웨어 개발에 있어서 매우 중요합니다.
• 다른 모듈과 의존성이 낮을수록 재사용성은 증가.
• 재사용성이 높아지면 개발 기간 단축(생산성 향상) 및 유지보수가 용이.

계층적 구조

• 작은 컴포넌트들을 조합해 더 큰 컴포넌트를 만들 수 있으며, 이는 코드의 가독성과 유지보수성을 높입니다.

가상 DOM (Virtual DOM)

• 성능 최적화: DOM 조작의 비용을 최소화하는 접근 방식입니다.
• 효율적인 렌더링: 변경된 부분만 실제 DOM에 반영하여 성능을 극대화합니다.

작동 원리

1. 가상 DOM은 메모리 상의 가벼운 JS 객체 표현입니다.
2. 상태 변경 시 새로운 가상 DOM 트리를 생성합니다.
3. 이전 가상 DOM과 비교하여 실제로 변경된 부분만 실제 DOM에 반영합니다.

   📌 결국 변경되야할 부분만 반영해 출력한다는 내용입니다.!

단방향 데이터 흐름

예측 가능한 상태 관리: 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로 흐릅니다.
디버깅 용이성: 데이터 변경 추적이 쉽고, 애플리케이션의 상태를 예측하기 쉽습니다.

📌 흐름이 정해져있기 때문에 디버깅의 용이성이 높습니다.!

SPA(Single Page Application)

최초 로드 시 단 한 번만 페이지 전체를 로드하고, 이후 사용자와의 상호작용에 따라 동적으로 콘텐츠를 변경하는 웹 애플리케이션 방식입니다.

SPA의 장점

• 빠른 인터랙션과 응답성
• 서버 부하 감소
• SPA를 통해 모바일에 최적화된 UI/UX를 구현 가능
• 개발의 모듈성과 유지보수성 향상

SPA의 단점

• 초기 로딩 속도가 상대적으로 느릴 수 있음
• 브라우저 메모리 관리 필요

이렇게 리액트의 개요와 특징을 간단하게 알아보았습니다
이제 개발환경 셋팅으로 넘어가겠습니다.!🏃

개발환경 셋팅

Node.js 와 npm 설치를 해야합니다.!
Node.js : https://nodejs.org/en
위 링크를 다운로드하면 Node.js와 npm를 설치 할 수 있습니다.!
추가적인 설정은 없고 NEXT 누르시고 Install하시면 됩니다.! 👍

Node.js

• Javascript 기반 네트워크 애플리케이션 개발을 위한 개발 환경(플랫폼)

npm(node package manager)

• 프로젝트에 필요한 다양한 외부 패키지의 버전과 의존성을 관리
• 패키지를 쉽게 설치하고 삭제할 수 있게 도와주는 역할

마지막으로 아래 명령어로 제대로 설치되었는지 확인하면 됩니다!
Mac : 터미널
Windows : 명령 프롬프트
node -v
npm -v
제대로 출력된다면 설치는 끝났습니다. 👏👏

VSCode를 설치하는 것은 생략하겠습니다!
프로젝트를 생성하기 전에 workspace를 생성하는 것을 추천드립니다!

CRA(create-react-app) 기반 리액트 프로젝트 생성

• CRA(Create React App)는 React로 웹 애플리케이션을 개발할 때 필요한 기본 설정이 포함된 프로젝트를 생성해주는 도구입니다.

📌 사전에 Node.js 설치를 잊지 말아 주세요 😭
그럼 시작하겠습니다.

리액트 프로젝트 생성 작업순서

경로는 Linux 명령어로 디렉터리 이동하면 됩니다.!

1. VSCode 터미널 에서 자신의 workspace로 경로 이동
2. 아래의 명령어를 입력 후 y선택.

   $ npx create-react-app <project name>
    e.g $ npx create-react-app my-app
    Project Name : my-app

3. 설치가 완료된다면 Happy hacking 출력
4. 자신의 Project로 경로 이동
5. 아래 명령어를 입력해 내장 웹서버 실행

    $ npm start

📌 위의 작업이 끝났다면 Local 서버 주소가 출력되고 그곳으로 이동하시면 성공적으로 셋팅된 것이 보이실 겁니다!!
봐주셔서 감사합니다! 😊