'use client'
import api from '@/utils/api'
import { useParams, useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'use client: 이는 코드 조각의 시작
유틸리티: 특정 작업이나 기능을 수행하기 위해 사용되는 도구나 기능
모듈: 프로그래밍에서 코드의 조각을 구조화하고 재사용 가능하게 만드는 기본적인 단위입니다. 일반적으로 모듈은 특정 기능이나 관련된 코드들의 집합을 말하며, 프로그램을 구성하는 데 사용됩니다.
컴포넌트는 사용자 인터페이스를 구성하는 빌딩 블록입니다. React에서 컴포넌트는 UI를 작은 재사용 가능한 부분으로 분할하여 개발을 단순화하고 코드의 재사용성을 높이는 데 사용됩니다. 각각의 컴포넌트는 자체적인 상태 및 동작을 가질 수 있으며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들어낼 수 있습니다.
컴포넌트는 두 종류로 나눌 수 있습니다:
함수 컴포넌트 (Functional Component): 함수로 작성된 컴포넌트로, 주로 상태를 갖지 않고 props를 입력으로 받아 UI를 렌더링합니다. React Hooks를 사용하여 상태와 생명주기 기능을 함수 컴포넌트에서도 사용할 수 있습니다.
예시:
jsx
Copy code
function MyFunctionalComponent(props) {
return <div>{props.text}</div>;
}클래스 컴포넌트 (Class Component): ES6 클래스로 작성된 컴포넌트로, React의 Component 클래스를 상속받아 만듭니다. 상태를 가질 수 있고, 생명주기 메서드를 사용할 수 있습니다. 이전에 주로 사용되었으나, 현재는 함수 컴포넌트와 훅을 주로 사용합니다.
예시:
jsx
Copy code
class MyClassComponent extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}컴포넌트는 UI를 구조화하고 관리하는 데 있어서 핵심적인 역할을 하며, React 애플리케이션의 기반이 됩니다. 컴포넌트는 작고 재사용 가능한 단위로 분할하여 코드의 가독성과 유지보수성을 향상시킵니다.
컴포넌트는 웹 페이지나 앱에서 볼 수 있는 작은 조각들이에요. 예를 들어, 하나의 컴포넌트는 페이지 상단에 있는 로고일 수 있고, 다른 하나는 사용자가 입력하는 텍스트 상자일 수 있어요. 이러한 컴포넌트들은 각각의 역할을 하며, 모여서 전체 화면을 만들어냅니다.
쉽게 요약하자면 화면에 나오는 각종 디자인 구조들
훅은 함수 컴포넌트 내에서 React 기능을 사용할 수 있게 해주는 JavaScript 함수
예를 들어, useState 훅은 함수 컴포넌트 내에서 상태를 추가하고 관리하는 데 사용됩니다. useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 작업을 수행하는 데 사용됩니다. 이러한 훅들은 컴포넌트의 기능을 보완하고 확장하여 더 많은 기능을 제공할 수 있도록 도와줍니다.
마운트(Mount): 웹 애플리케이션이나 프레임워크에서 컴포넌트가 화면에 나타나는 과정을 가리킵니다. 일반적으로 웹 페이지가 로드되거나, 라우팅에 따라 새로운 경로로 이동할 때 컴포넌트가 마운트됩니다.
React나 Vue.js와 같은 프론트엔드 프레임워크에서는 컴포넌트가 DOM에 추가되고 화면에 표시되는 과정을 "마운트"라고 합니다. 이 과정은 다음과 같은 단계를 포함합니다:
컴포넌트 생성(Creation): 컴포넌트의 인스턴스가 생성됩니다. 이 단계에서는 컴포넌트의 생성자가 호출되고 초기 상태(State)와 속성(Properties)이 설정됩니다.
가상 DOM 생성(Virtual DOM Creation): React와 같은 라이브러리에서는 컴포넌트의 가상 DOM 트리가 생성됩니다. 이는 실제 DOM에 대한 추상화된 버전으로, 변경 사항을 효율적으로 감지하고 업데이트하는 데 사용됩니다.
실제 DOM에 추가(Add to the Actual DOM): 가상 DOM이 실제 DOM에 추가됩니다. 이를 통해 화면에 컴포넌트가 나타나게 됩니다.
렌더링(Render): 마지막으로 컴포넌트가 화면에 렌더링됩니다. 이 과정에서는 가상 DOM을 실제 DOM으로 변환하고 화면에 표시될 HTML을 생성합니다.
마운트가 완료되면 컴포넌트는 사용자에게 보여지고, 상호작용할 수 있게 됩니다. 마운트된 컴포넌트는 이후에 업데이트나 제거될 때까지 화면에 유지됩니다.
라우팅(Routing)은 사용자가 애플리케이션에서 다른 페이지로 이동할 때 어떻게 처리할지를 결정하는 프로세스입니다. 웹 애플리케이션에서는 일반적으로 여러 개의 페이지로 구성되어 있으며, 사용자가 각 페이지 간을 이동하면 라우팅이 발생합니다.
라우터(Router)는 이러한 라우팅을 관리하고 처리하는 데 사용되는 도구나 라이브러리입니다. 주로 웹 프레임워크나 라이브러리에서 제공되며, 사용자의 URL 요청에 따라 적절한 컴포넌트를 렌더링하고 화면에 표시합니다.
예를 들어, React에서는 React Router 라이브러리를 사용하여 라우팅을 처리할 수 있습니다. 이를 통해 사용자가 URL을 변경하면 해당 URL에 맞는 컴포넌트를 렌더링하고 화면에 표시할 수 있습니다.
라우터는 다음과 같은 주요 기능을 제공합니다:
라우트 설정: 각 URL 경로에 대한 라우트를 설정하고, 해당 경로에 맞는 컴포넌트를 연결합니다.
URL 처리: 사용자의 URL 요청을 감지하고, 해당하는 라우트에 대한 처리를 수행합니다.
컴포넌트 렌더링: 각 URL에 맞는 컴포넌트를 렌더링하고, 화면에 표시합니다.
useState: 함수 컴포넌트 내에서 상태를 추가하고 관리할 수 있게 해주는 훅입니다.
useEffect: 부작용(side effect)을 수행할 수 있는 훅으로, 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나, 마운트/언마운트/업데이트 시에 특정 동작을 실행할 수 있습니다.
useContext: 컨텍스트를 사용할 수 있게 해주는 훅으로, 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있습니다.
useReducer: 리듀서 함수를 사용하여 상태를 관리할 수 있게 해주는 훅입니다. 이는 복잡한 상태 관리 시나리오에서 사용될 수 있습니다.
useCallback 및 useMemo: 성능 최적화를 위해 콜백 함수나 메모이제이션된 값을 만들 수 있게 해주는 훅입니다.
use client: 이는 코드 조각의 시작을 나타내며, 클라이언트 측 코드를 작성할 것임을 알려줍니다.
import api from '@/utils/api': 이 줄은 애플리케이션에서 사용할 API 유틸리티를 가져오는 것입니다. @/utils/api 경로에서 API 유틸리티를 가져옵니다. 이러한 유틸리티는 API 요청을 쉽게 만들고 관리하기 위해 사용될 것입니다.
import { useParams, useRouter } from 'next/navigation': 이 코드는 Next.js의 라우팅 및 네비게이션 관련 훅을 가져옵니다. useParams는 URL 매개변수를 추출하기 위해 사용되며, useRouter는 라우터 인스턴스에 접근하기 위해 사용됩니다.
import { useEffect, useState } from 'react': React에서 useEffect와 useState 훅을 가져옵니다. 이러한 훅들은 컴포넌트의 부작용을 처리하고 상태를 관리하는 데 사용됩니다.
