조회기능 구현 강의에서 에러가 발생했습니다

Question

ReadComponent.js 파일을 만들고 ReadPage의 리턴 내용에 ReadComponent의 tno 값을 추가한 후에 npm start를 실행했는데 아래와 같은 에러가 발생했습니다.

[eslint] src\components\menus\todo\ReadComponent.js

Line 13:29: 'useState' is not defined no-undef

Line 16:9: 'getOne' is not defined no-undef

Search for the keywords to learn more about each error.

ReadComponent.js의 useState와 getOne 로직 부분이 잘못 된 거 같아서 강의 영상을 다시 봤는데 틀린 부분이 없어 보여 어떤 게 문젠지 질문을 드리고 싶습니다.

참고용으로 ReadComponent.js의 내용을 추가해놓겠습니다.

import React, { useEffect } from 'react';

const initState = {
    tno:0,
    title:'',
    writer:'',
    dueDate: '',
    complete: false
}

function ReadComponent({tno}) {

    const [todo, setTodo] = useState(initState)

    useEffect(() => {
        getOne(tno).then(data => {
            console.log(data)
            setTodo(data)
        })


    }, [tno]);

    return (
        <div>
            
        </div>
    );
}

export default ReadComponent;

덧붙여서 툴은 vscode를 쓰고 있습니다. 잘 부탁드리겠습니다.

); } export default ReadComponent; 덧붙여서 툴은 vscode를 쓰고 있습니다. 잘 부탁드리겠습니다.

wjdwoals042 · Answer

감사합니다. useState와 getOne 문제는 import문을 추가해서 해결됐습니다.

그런데 이번에는 todoApi.js에서 에러가 발생했습니다.

[eslint]

src\api\todoApi.js

Line 6:23: 'axios' is not defined no-undef

Line 14:23: 'axios' is not defined no-undef

Search for the keywords to learn more about each error.

위 에러도 axios를 위한 import문이 필요한 건지 질문 드리고 싶습니다.

아래에 todoApi.js 내용을 추가하겠습니다.

export const API_SERVER_HOST = 'http://localhost:8080'

const prefix = '${API_SERVER_HOST}/api/todo'

export const getOne = async (tno) => {
    const res = await axios.get('${prefix}/${tno}')

    return res.data
}

export const getList = async (pageParam) => {
    const {page,size} = pageParam

    const res = await axios.get('${prefix}/list', {params:{page,size}})

    return res.data

}

구멍가게코딩단 · Answer

import 처리 부분에 문제가 있으신 듯 합니다.   useState 도 필요하고 getOne 을 위한 import가 필요합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. wjdwoals042님. &ldquo;Eslint&rdquo;에서 발생한 오류 메시지를 통해, useState 와 getOne 함수가 정의되지 않았다는 것을 확인할 수 있습니다. 이는 보통 해당 함수들이 import되지 않았거나, 정의되지 않았을 때 발생하는 문제입니다. 이러한 오류를 해결하기 위해 다음 사항을 확인하고 조치해 보시기 바랍니다. useState import 여부 확인 : useState 는 React 훅 중 하나이므로 import React, { useEffect, useState } 와 같이 선언되어야 합니다. 현재 코드에서 useState 가 import된 부분이 누락되어 발생한 문제로 보입니다. import React, { useEffect, useState } from 'react'; getOne 함수 정의 여부 확인 : getOne 함수는 아마도 특정 API 호출을 하는 함수일 가능성이 큽니다. 이 함수가 현재 파일 내에서 정의되어 있지 않다면 다른 모듈에서 import해야 합니다. 예를 들어, 만약 getOne 함수가 api.js 파일에 있다면, 해당 파일로부터 해당 함수를 import해야 합니다. // 예: import getOne from '../api'; import { getOne } from '../../api/todoApi'; 위의 수정을 통해 문제를 해결하실 수 있을 것입니다. 추가적으로, 관련 문제에 대한 해결 방법을 찾는데 도움이 될 수 있는 유사한 질문과 답변을 아래 링크에 제공합니다: TypeError: Cannot read properties of undefined (reading ‘map’)에 대한 문제 이 내용이 궁금하신 점을 해결하는 데 도움이 되길 바랍니다. 저의 안내가 충분하지 않다면, 추가 질문을 남겨주시면 지식공유자님께서 곧 도움을 주실 것입니다. 베타 기능 적용 중이니 다소 불편할 수 있는 점 양해 부탁드립니다. 🙏 추가적인 질문이나 도움이 필요하시면 언제든지 말씀해 주세요. 감사합니다!

인프런 커뮤니티 질문&답변

조회기능 구현 강의에서 에러가 발생했습니다