[원티드] React Hook과 SPA 실전 개발

이 글은 네이버 블로그에 2024년 8월 18일에 올렸던 것을 그대로 옮겨온 것입니다.

React의 핵심 개념을 배우고 JSX를 통해 실제로 코드를 작성합니다.

상태 관리의 기초부터 Hooks를 사용한 고급 기법까지, 효율적인 상태 관리 방법을 배웁니다.

서버 사이드 렌더링과 정적 사이트 생성을 포함하는 SPA를 Next.js로 구축하는 방법을 배웁니다.

• React의 핵심 개념과 JSX를 통한 실습

• React, JSX 문법, Virtual DOM

• 왜 React인가? 웹 개발에서의 그 중요성과 변화

• React의 주요 특징과 개발자에게 주는 이점들

• 함수형 대 클래스형 컴포넌트: 사용 시기와 장단점

• JSX 소개: HTML과의 차이점

• 조건부 렌더링과 이벤트 처리

• React 컴포넌트 만들기: 실습을 통해 배운 내용 적용

• 상태 관리와 React Hooks 탐구

• 상태(state)와 속성(props), Hooks

• 상태와 속성의 구분 및 각각의 역할

• useState와 useEffect로 컴포넌트 생명주기 관리

• 실제 예제를 통한 Hooks 이해

• Next.js를 이용한 SPA 개발

• Next.js, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)

• SPA와의 차별점과 Next.js에서의 적용

• 차별점과 Next.js에서의 적용

• 동적 라우팅과 데이터 로드 방법

• Next.js를 활용한 입력폼 개발

• SPA 개발의 전 과정을 실습하며 완성도 높은 애플리케이션 만들기

• 통합 상태 관리, 라우팅과 API 연동, 배포 및 최적화

• • 실제 사례를 바탕으로 한 요구 사항 분석
• • 성능과 SEO를 위한 최적화 전략
• • 실제 배포 과정의 이해와 준비

1. JavaScript ES6+ 기능

문제: JavaScript ES6 이후에 추가된 주요 기능 중에서, 템플릿 리터럴, 화살표 함수, 스프레드 연산자를 설명하고, 이러한 기능들이 JavaScript 프로그래밍에 어떤 이점을 제공하는지 구체적인 예를 들어 설명해 주세요.

2. React 컴포넌트의 종류와 차이

문제: 함수형 컴포넌트와 클래스형 컴포넌트를 비교 설명하고, React Hooks가 도입된 배경과 이로 인해 달라진 React 개발 방식에 대해 설명해 주세요.

3. Next.js의 App Path Routing

문제: Next.js 12.2 버전부터 도입된 App Path Routing에 대해 설명하고, 이전의 페이지 기반 라우팅과 어떻게 다른지, 그리고 이 새로운 라우팅 방식이 개발자에게 어떤 이점을 제공하는지 분석해 주세요.

4. 서버 사이드 렌더링과 정적 사이트 생성

문제: Next.js에서 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 차이를 설명하고, 각각 어떤 시나리오에서 사용되어야 하는지 예를 들어 설명해 주세요.