리엑트 코어 정보

1. React 핵심 개념

• JSX: HTML과 유사한 문법을 JavaScript 내에서 작성할 수 있게 하는 React의 핵심 문법.
• 컴포넌트(Component): 재사용 가능한 UI 구성 요소. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 이해.
• Props와 State:
  • Props: 부모에서 자식으로 데이터를 전달하는 읽기 전용 객체.
  • State: 컴포넌트 내부에서 관리되는 동적인 데이터.
• Lifecycle Methods: 클래스 컴포넌트에서 사용되는 생명주기 메서드 (e.g., componentDidMount, componentDidUpdate).
• Hooks:
  • 필수적인 Hook: useState, useEffect
  • 추가적인 Hook: useContext, useReducer, useMemo, useCallback, useRef
• Virtual DOM: Virtual DOM이 실제 DOM보다 빠른 이유와 React가 이를 사용하는 방식.

---

 

 

 

2. React와 State 관리

• State Management:
  • React 자체의 useState, useReducer로 관리.
  • 전역 상태 관리 도구: Redux, MobX, Zustand, Recoil.
  • Context API: 간단한 전역 상태 관리.

---

 

 

 

 

3. React Router

• SPA(Single Page Application)에서 라우팅 처리.
• React Router:
  • 주요 컴포넌트: <BrowserRouter>, <Route>, <Link>, <Navigate>.
  • 동적 라우팅, URL 파라미터 처리, 리다이렉트.

---

 

 

 

 

4. API 통신 및 데이터 처리

• REST API: fetch 또는 axios를 사용해 백엔드와 통신.
• GraphQL: 데이터를 클라이언트가 원하는 형태로 쿼리.
• 상태 관리와 결합하여 데이터 패칭 효율화.
• React Query: 비동기 데이터 관리 라이브러리.

---

 

 

 

 

 

5. 스타일링

• CSS-in-JS: Styled-components, Emotion.
• CSS Modules: 클래스 이름 충돌을 방지.
• Tailwind CSS, Bootstrap 같은 CSS 프레임워크.

---

 

 

 

 

 

 

6. React 성능 최적화

• React.memo: 컴포넌트 리렌더링 방지.
• useMemo, useCallback: 불필요한 연산과 렌더링 최소화.
• Lazy Loading: React.lazy와 Suspense로 컴포넌트 지연 로드.
• Code Splitting: Webpack과 함께 사용해 번들 크기 감소.

---

 

 

 

 

 

7. 테스트

• 유닛 테스트: Jest, React Testing Library.
• E2E 테스트: Cypress, Playwright.

---

8. React Native (모바일 앱 개발 시 필수)

• React와 동일한 개념을 기반으로 하며, 모바일 환경에 맞춘 추가적인 학습 필요.
• 네이티브 모듈 연결, 성능 최적화 등.

---

 

 

 

 

8. 타입스크립트와 React

• 타입 안전성: 컴포넌트의 props, state를 정의.
• interface와 type을 사용한 구조적 설계.

---

 

 

 

 

9. 프로젝트 구축과 배포

• 프로젝트 초기화: create-react-app 또는 Vite.
• 빌드 도구: Webpack, Babel.
• CI/CD와 배포: GitHub Actions, Vercel, Netlify.