[React] React시작하기

React란

개념

• 페이스북에서 개발된 JavaScipt 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용된다.
• React는 재사용 가능한 UI컴포넌트를 구축하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 만들 수 있도록 도와준다.

장점

• 가상 DOM을 사용하여 성능을 향상 시킨다. 가상 DOM은 변경된 부분만 실제 DOM에 적용하여 불필요한 리렌더링을 방지하고 효율적인 업데이트를 가능하게 한다.
• 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 유지보수가 용이한 코드를 작성할 수 있다. 컴포넌트는 독립적이며 관리하기 쉬우며, 개별적으로 테스트 할 수 있다.
• 단방향 데이터 흐름을 따르기 때문에 데이터의 흐름이 예측 가능하고 디버깅이 용이하다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 props를 통해 데이터를 받는다.

단점

• React는 JavaScipt 라이브러리이므로 JavaScipt에 익숙하지 않은 개발자에게는 학습 곡선이 있을 수 있다. 또한, React 생태계에는 여러 개념과 도구가 존재하여 처음 접하는 개발자에게는 복잡할 수 있다.
• React는 UI렌더링에 집중하기 때문에 라우팅, 상태 관리, 서버와의 통신 등과 같은 기능은 추가 라이브러리나 프레임워크를 사용해야 한다.

React는 언제 자주 사용하는지

대규모 애플리케이션 개발

React는 컴포넌트 기반 아키텍처를 제공하므로, 애플리케이션을 재사용 가능하고 관리하기 쉬운 작은 컴포넌트로 분할할 수 있다.
이를 통해 대규모 애플리케이션의 개발 및 유지보수를 용이하게 한다.

싱글 페이지 애플리케이션(SPA)

React는 SPA의 개발에 적합한 프레임워크이다.
SPA는 페이지 전환 없이 동적으로 데이터를 로드하고 사용자와 상호작용하는 웹 애플리케이션이다.
React의 가상 DOM(Virtual DOM)을 통해 효율적인 업데이트를 수행하고, 컴포넌트 간의 상태 관리를 용이하게 한다.

UI 컴포넌트 개발

React는 재사용 가능한 UI 컴포넌트를 쉽게 개발할 수 있도록 도와준다.
컴포넌트 기반 아키텍처를 사용하므로, UI를 독립적으로 개발하고 테스트할 수 있다.
또한, JSX(JavaScript XML)를 사용하여 컴포넌트의 렌더링과 상호작용을 보다 간편하게 작성할 수 있다

모바일 애플리케이션 개발

React Native는 React를 기반으로 하는 모바일 애플리케이션 개발 프레임워크이다.
React Native를 사용하면 JavaScript를 통해 iOS 및 Android용 네이티브 애플리케이션을 개발할 수 있다.
React와 동일한 개발 경험을 제공하면서, 효율적이고 편리한 모바일 애플리케이션 개발을 가능하게 한다.

React 시작하기

nods.js가 설치되어 있어야 하며, VScode를 사용한다.

React 설치

1. 빈 폴더를 생성한 후, npx create-react-app "app이름"를 통해 app을 설치한다.
2. npm start 명령어를 통해 app을 열 수 있다.

React 구조

• public 폴더:
  • 정적인 파일들이 위치한다.
  • HTML 파일과 기타 정적 자원을 포함한다.
  • React 앱이 실행될 때, public 폴더의 내용은 그대로 유지되며, 빌드 과정에서 복사된다.
• index.html:
  • 앱의 진입점이 되는 HTML 파일이다.
  • 여기서 React 앱의 루트 DOM 요소를 정의하고, JavaScript 파일들을 로드한다.
• favicon.ico:
  • 웹 사이트의 파비콘 아이콘 파일이다.
  • 웹 브라우저 탭에 표시되는 작은 아이콘이다.
• src 폴더:
  • React 애플리케이션의 소스 코드가 위치한다.
  • 대부분의 작업은 이 폴더 내에서 이루어진다.
• index.js:
  • 앱의 진입점이 되는 JavaScript 파일이다.
  • ReactDOM.render() 함수를 사용하여 React 컴포넌트를 루트 DOM 요소에 렌더링한다.
• App.js:
  • 기본적으로 제공되는 예제 컴포넌트이다.
  • 이 파일에서 앱의 주요 컴포넌트를 정의하고, UI와 로직을 구현할 수 있다.
• App.css:
  • App.js 컴포넌트에 대한 스타일을 정의하는 CSS 파일이다.
• App.test.js:
  • App.js 컴포넌트에 대한 테스트를 작성할 수 있는 테스트 파일이다.
• index.css:
  • 전역 CSS 스타일을 정의하는 파일이다.
• logo.svg:
  • 기본적으로 제공되는 리액트 로고 이미지 파일이다.
• node_modules 폴더:
  • 앱이 종속하는 모든 패키지와 라이브러리들이 위치하는 폴더이다.
  • "npm install" 또는 "yarn install" 명령을 실행하면 이 폴더에 패키지들이 설치된다.
• 기타 파일들:
  • package.json:
    • 프로젝트의 메타 정보와 종속성 정보가 포함된 파일이다.
    • 프로젝트 설정과 스크립트, 의존하는 패키지 버전 등을 정의할 수 있다.
  • package-lock.json 또는 yarn.lock:
    • 패키지의 정확한 버전 및 의존성 관리에 사용되는 파일이다.
  • README.md:
    • 프로젝트에 대한 간략한 설명과 사용 방법을 포함한 문서이다.
  • .gitignore:
    • Git으로 버전 관리하지 않을 파일과 폴더를 지정하는 설정 파일이다.

React의 기초에 대해 알아보았다.
다음은 React의 기초적인 사용법에 대해 알아 볼 예정이다.