export default function ArticleEdit() {
const params = useParams()
const [isLoding, setIsLoding] = useState(false)
const [article, setArticle] = useState({ subject: '', content: '' })
const router = useRouter()
useEffect(() => {
fetchArticle()
}, [])ArticleEdit 함수 컴포넌트는 Next.js에서 게시물을 수정하는 페이지를 정의합니다. 코드를 하나씩 살펴보면:
useParams(): 이 훅은 Next.js에서 현재 경로의 동적 세그먼트(parameter) 값을 가져옵니다. 여기서는 게시물의 ID를 가져오는 데 사용됩니다.
useState: 이 훅은 상태를 관리하는 데 사용됩니다. isLoading은 현재 데이터가 로드 중인지를 나타내는 상태이고, article은 게시물의 제목과 내용을 저장합니다. 초기값으로는 빈 문자열을 가지고 있습니다.
useRouter(): 이 훅은 Next.js에서 라우팅과 관련된 정보를 가져옵니다. 여기서는 페이지를 리디렉션할 때 사용됩니다.
useEffect(): 이 훅은 컴포넌트가 마운트될 때와 언마운트될 때 특정 작업을 수행하기 위해 사용됩니다. 여기서는 fetchArticle() 함수가 컴포넌트가 마운트될 때 호출되어 게시물을 가져옵니다.
fetchArticle(): 이 함수는 API를 호출하여 현재 사용자 정보를 가져온 후, 해당 게시물의 정보를 가져옵니다. 만약 에러가 발생하면 사용자를 로그인 페이지로 리디렉션합니다.
handleSubmit(): 이 함수는 게시물 수정 양식이 제출될 때 호출됩니다. API를 사용하여 수정된 게시물을 업데이트합니다.
handleChange(): 이 함수는 입력 필드의 변경 사항을 감지하여 article 상태를 업데이트합니다.
반환되는 JSX는 isLoading 상태에 따라 로딩 중 메시지 또는 수정 양식을 표시합니다.
동적 세그먼트(parameter): 웹 애플리케이션에서 URL의 일부로 사용되는 값
const [isLoding, setIsLoding] = useState(false)
이 코드는 React의 함수 컴포넌트 내에서 상태(state)를 관리하기 위해 사용되는 useState 훅을 사용하고 있습니다.
useState 훅은 React 함수 컴포넌트 내에서 상태 값을 추가하고 관리할 수 있게 해주는 기능입니다. 이 훅은 배열 형태로 사용되며, 첫 번째 요소는 상태 값 자체이고, 두 번째 요소는 해당 상태 값을 변경하는 함수입니다. 아래와 같은 구조를 가집니다.
javascript
Copy code
const [state, setState] = useState(initialState);여기서 state는 상태 값이고, setState는 해당 상태 값을 변경하는 함수입니다. initialState는 상태 값의 초기값을 나타냅니다.
따라서 코드에서는 다음과 같이 초기값이 false로 설정된 isLoading 상태 값을 선언하고, 이를 변경할 수 있는 setIsLoading 함수를 생성하고 있습니다.
javascript
Copy code
const [isLoading, setIsLoading] = useState(false);이 상태 값은 데이터가 로드 중인지를 나타내는데 사용됩니다. 예를 들어, 데이터를 불러오기 전에는 isLoading이 false이고, 데이터를 불러오는 중일 때는 isLoading이 true로 변경됩니다. 이를 통해 로딩 상태를 컴포넌트에서 관리하고, 로딩 중일 때 로딩 스피너 등을 표시할 수 있습니다.
