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

// 간단한 회원가입 폼 
// 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 해결완료 버튼을 클릭해주세요

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

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

     

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

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