React_기본개념

💡 리액트 기본 개념

📌 리액트란?

• 리액트(React)는 페이스북(현재 Meta)에서 개발한 JavaScript 라이브러리로,
• 주로 사용자 인터페이스(UI)를 구성하는 데 사용됩니다.
• 리액트의 주요 특징은 컴포넌트 기반 개발입니다.
• UI를 여러 개의 독립적인 컴포넌트로 나누어 재사용성을 높이고 관리하기 쉽게 만듭니다

---

📌 컴포넌트

• 컴포넌트는 UI의 기본 단위입니다
• 리액트에서 UI 요소는 모두 컴포넌트로 구성되며, 각 컴포넌트는 함수형 또는 클래스형으로 작성할 수 있습니다.
• 최신 리액트에서는 함수형 컴포넌트가 주로 사용됩니다.

---

📌 함수형 컴포넌트

• 함수형 컴포넌트는 JavaScript의 함수로 작성된 컴포넌트입니다
• 컴포넌트 이름은 대문자로 시작해야 하며, 파일 이름도 대문자로 시작하는 것이 일반적입니다
  (예: MyComponent.js).

---

📌 HTML 속성

• 리액트에서 HTML 속성으로 class를 사용할 수 없습니다 이유는 class가 JavaScript의 예약어이기 때문입니다
• 대신 className을 사용하여 CSS 클래스를 지정 합니다

<div className="my-class">Hello</div>

---

📌 Return

• 리액트 컴포넌트는 단 하나의 태그 요소만 리턴할 수 있습니다
• 여러 개의 요소를 리턴하려면,하나의 부모 요소로 감싸야 합니다
  -예를 들어, div 나 section 등으로 감싸서 반환합니다

return (
  <div>
    <h1>Hello World</h1>
    <p>Welcome to React</p>
  </div>
);

---

📌 자기 닫힘 태그

• 자기 닫힘 태그는 내용이 없을 경우 태그가 스스로 닫히는 형태이며, input / 과 같은 태그는 자체적으로 닫힙니다

<input type="text" />

---

💡 리액트의 구조

📌 App.js

• App.js는 애플리케이션의 시작점이자 메인 컴포넌트로, 다른 컴포넌트를 import하여 최종적으로 렌더링하는 역할을 합니다
• App.js 파일에서는 다른 컴포넌트를 조합하여 전체 UI를 구성합니다

📌 index.js

• index.js는 리액트 애플리케이션의 입구입니다
• index.js에서 React DOM을 사용하여 최종적으로 컴포넌트를 index.html의 특정 DOM 요소 (#root)에 렌더링합니다

ReactDOM.render(<App />, document.getElementById('root'));

📌 SPA (Single Page Application)

• Single Page Application(SPA)은 하나의 HTML 페이지로 여러 페이지처럼 동작하는 방식입니다
• 페이지 이동 없이, URL만 변경되며 화면만 갱신됩니다

  장점 : 페이지 간 전환이 빠르고 서버와의 불필요한 통신이 없습니다.
  단점 : 초기 로딩 시간이 길 수 있습니다.

---

💡 라우팅과 네트워크 통신

📌 React Router

• 리액트에서는 페이지 이동을 관리할 때 a 태그 대신에 Link 태그를 사용합니다.

import { Link } from 'react-router-dom';
<Link to="/about">About</Link>

• Link는 페이지 간의 네비게이션을 처리하며, 전체 페이지를 다시 로드하지 않고, 필요한 부분만 갱신합니다
• a 태그와 달리 리액트에서 Link는 네트워크 통신을 발생시키지 않습니다

📌 네트워크 통신

• 리액트에서는 페이지를 처음 로드할 때만 서버와 1번 통신을 하고, 이후에는 AJAX나 Fetch API 등을 사용해 비동기적으로 데이터를 처리합니다
• 페이지 로드 후에는 서버와의 통신 없이 화면을 동적으로 업데이트할 수 있습니다

🔎 a 태그와 Link 차이

• a 태그는 클릭 시 새로운 요청이 발생하고 페이지가 새로고침됩니다
• Link는 클릭 시 서버와의 통신 없이 페이지 내용만 업데이트되므로 빠른 페이지 전환이 가능합니다

---

💡 빌드 및 배포

📌 빌드

• 개발이 완료되면 yarn build 또는 npm run build 명령어를 통해 최종 빌드를 생성합니다

yarn build

• 빌드 결과물은 build 폴더에 생성되며, 이 폴더에 있는 파일들은 라이브 서버에서 실행 가능합니다
• 빌드 폴더 안에 있는 정적 파일들은 배포 가능한 최종 파일입니다

---