useEffect는 컴포넌트가 3가지 상태일때 동작된다.Mount : 화면에서 생성될때Upadate : 화면에서 업데이트 될때UnMount : 화면에서 사라질때useEffect는 기본적으로 인자로 callback 함수를 인자로 받는다.useEffect 의 형태첫번째, useEffect의 인자로 callback 함수만 받는 경우useEffect(() => { // code.});해당경우는 component가 처음 렌더링될때 , 그리고 화면 다시 리렌더링 될 때 실행된다.두번째, useEffect의 인자로 callback 함수와 배열을 받는 경우 (dependency array)useEffect(() => { // code.} , [value] );component가 처음 렌더링될때 , 그리고 depen..

Context API가 무엇인가?context는 리액트에서 컴포넌트끼리 어떠한 값을 공유하는 기능이다.보통 전역적(global)로 사용되지만, 꼭 전역적으로 사용할 필요는 없다.Context API를 왜 사용하는가?React에서 컴포넌트에서 값을 props로 넘겨주면 생기는 props drill현상이 있다.import React from 'react';// 최상위 컴포넌트function App() { const username = 'johndoe'; // 사용자 이름을 상태로 관리하거나 props로 받을 수 있습니다. return ( Level 1 );}export default App;// 두 번째 컴포넌트function LevelTwo({ username })..

📘 Next.js 에 markdown 설치 하기# ✨ Next.js에서 MDX 사용하기## 📦 MDX 관련 패키지 설치yarn add @next/mdx @mdx-js/loader @mdx-js/reactyarn add --dev @types/mdx@next/mdx: Next.js에서 MDX를 지원하기 위한 공식 패키지@mdx-js/loader: MDX 문서를 컴파일하는 Webpack 로더@mdx-js/react: MDX 문서 내에서 React 컴포넌트를 사용하기 위한 기능을 제공합니다.@types/mdx: TypeScript 프로젝트에서 MDX 파일에 대한 타입 지원을 제공합니다.remark-prism: 마크다운 내 코드 블록을 하이라이팅하기 위한 패키지 (선택사항)🔧 next.config.mjs ..