리액트 사용의 이점과 시작 가이드: 프로젝트 구조 이해 및 기본 컴포넌트 생성 방법

리액트를 사용해야 하는 이유 

 

1. 구성 요소 기반 아키텍처: React는 구성 요소 기반 라이브러리로 코드를 쉽게 재사용할 수 있고 애플리케이션의 다른 부분을 쉽게 유지 관리하고 업데이트할 수 있습니다.  
2. 선언적 프로그래밍: React를 사용하면 응용 프로그램의 상태와 일치하도록 DOM을 변경하는 방법에 대해 걱정할 필요가 없습니다. 원하는 UI 모양을 선언하기만 하면 React가 나머지를 처리합니다.
3. 가상 DOM: React는 가상 DOM을 사용합니다. 업데이트가 필요한 항목만 업데이트하여 성능과 속도를 개선하는 데 도움이 됩니다.
4. JSX: React의 JSX 구문을 사용하면 HTML과 같은 코드를 쉽게 작성할 수 있습니다. 더 쉽게 읽고 이해할 수 있습니다.
5. 크고 활동적인 커뮤니티: React에는 크고 활동적인 개발자 커뮤니티가 있습니다. 애플리케이션 구축에 도움이 되는 많은 리소스와 도구가 있음을 의미합니다.
6. 단방향 데이터 흐름: React는 단방향 데이터 흐름을 적용합니다. 데이터 흐름을 통해 애플리케이션에서 데이터가 어떻게 전달되는지 더 쉽게 이해할 수 있습니다.
7. 테스트하기 쉬움: React의 구성 요소 기반 아키텍처는 애플리케이션의 전반적인 품질을 개선하는 데 도움이 될 수 있는 개별 구성 요소를 쉽게 테스트할 수 있습니다.
8. React Native: React는 React Native를 사용하여 네이티브 모바일 애플리케이션을 구축하는 데에도 사용할 수 있으므로 웹 및 모바일 애플리케이션을 모두 구축해야 하는 경우 시간과 노력을 절약할 수 있습니다.
9. 서버측 렌더링: React는 서버측 렌더링을 수행하는 데 사용할 수 있으며, 이는 SEO 및 애플리케이션의 초기 로드 시간을 개선하는 데 도움이 될 수 있습니다.
10. 성능 최적화: React는 애플리케이션의 성능을 최적화하기 위한 도구와 기술을 제공하여 사용자 경험을 개선하고 느린 로드 시간으로 인해 사용자가 떠날 가능성을 줄일 수 있습니다.

 

리액트를 사용하기 위한 준비

 - node.js 다운

 - vs코드 다운

 - 리액트 프로젝트 폴더 생성

 - 터미널에서 npx create-react-app test 작성

 

다음은 프로젝트의 구조입니다.

 

node_modules 폴더는 리액트에서 사용할 수 있는 node.js 라이브러리들이 모여있는 곳입니다.

public 폴더는 static(정적인 파일들이 모여있는 곳입니다. ex) css 등

src 폴더는 실제적인 컴포넌트들과 실행 파일들이 모여있는 곳입니다.

 

터미널에서 npm start를 실행하면 리액트 웹앱이 작동한다. 

 

웹앱의 주소는 localhost:3000 이다.

 

다음 시간에는 기본적인 리액트의 컴포넌트를 생성해 보자