2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

// 간단한 회원가입 폼 
// 1. 이름 
// 2. 생년월일 
// 3. 국적 
// 4. 자기소개 

import { useState , useRef} from "react";

const Register = () =>{

    const [input, setInput] = useState({
        name : "",
        birth : "",
        country : "",
        bio : "" 
    });

    const refObj = useRef();
    console.log(refObj);

    const onChange = (e) =>{
        setInput({
            ...input,
            [e.target.name] : e.target.value
        })
    };


    return (
        <div>
            <div>
                 <input name = "name" value={input.name} onChange={onChange} placeholder={"이름"}></input>
            </div>
            <div>
                <input name = "birth"  type="date" value={input.birth} onChange={onChange} placeholder={"생년월일"}></input>
            </div>
            <div>
                <select name = "country"  value={input.country} onChange={onChange}>
                    <option>한국</option>
                    <option>미국</option>
                    <option>영국</option>
                </select>
            </div>
            <div>
                <textarea  name = "bio" value={input.bio} onChange={onChange}/>
            </div>
        </div>
    ); 
    
};

export default Register;

=> 오류 발생

@workspace /explain Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

17 |

18 | const refObj = useRef();

> 19 | console.log(refObj);

| ^^^^^^ Passing a ref to a function may read its value during render

20 |

21 | const onChange = (e) =>{

22 | setInput({

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)

• 제목을 구체적으로 작성해 주세요

  • ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.

  • ⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등

  • 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!

     

     

   

• 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.

  • 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요

  • 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲

     

• 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요

  • 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!

  • 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲

     

• 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요

  • 더 빠른 답변이 가능합니다!

Answer 2

0

winterlood

2026-02-09T01:54:38.168Z

안녕하세요 rumi du님 이정환입니다.

결론부터 말씀드리면, 강의 코드가 틀린 건 아닙니다!
console.log(refObj)는 실제로 오류를 발생시키지 않습니다.

올려주신 에러 메세지를 보면, @workspace/explain 이라는 접두사와 함께 시작하는데요, 이처럼 @workspace/explain으로 시작하는 에러메세지는 VSCode의 코파일럿의 설명으로 실제 프로젝트 동작에는 아무런 영향을 주지 않습니다.

아래와 같이 코파일럿을 사용하지 않는 환경에서의 제 코드는 아무런 오류도 발생하지 않는걸 보실 수 있습니다 😀

그렇다면 Copilot이 이런 메세지를 왜 보여주냐! 이는 잠재적으로 문제가 될 수 있는 코드이기 때문입니다. 렌더링 중에 ref를 함수에 전달하면 그 함수가 ref의 값을 읽을 수도 있기 때문에, Copilot이 "혹시 이거 의도한 거 맞아?" 하고 알려주는 거죠.

그런데 우리는 refObj를 콘솔에서 학습 목적으로 까보려는 것이기 때문에, 이런 경고는 무시해도 됩니다. 실제로 프로젝트를 실행해보시면 정상적으로 동작하는 걸 확인하실 수 있을 거예요!

 

1

rumi du

2026-02-09T12:02:05.342Z

그렇군요 빠른 답변 주셔서 감사합니다 ~

-1

Codingbear

2026-02-08T12:54:19.324Z

useRef() 훅을 사용했다면 해당 변수의 현재 값에 접근하려면 refObj.current 로 참조해야 합니다.

그리고 현재 const refObj = useRef() 는 초기값을 지정하거나 ref 속성으로 연결한 것이 보이지 않습니다.

0

rumi du

2026-02-08T13:35:21.839Z

그러면 강사님 코드가 틀린건가요? 저는 강사님 코드 그래도 작성한건데요