[2023.06.30] 개발일기

강의를 들으면서 같이 따라하다보니 분명 똑같이 따라했을텐데도 강의 선생님과는 다르게 어떤 오류가 발생한다.

 

부모 컴포넌트인 App.jsx 파일에서 TestPage를 찾을 수 없다는 에러 메세지.

확인해보니 자식 컴포넌트인 TestPage 파일에서 TestPage를 import해오지 않아서였다.

import TestPage from './TestPage'; 를 입력하니 간단하게 해결되었다.

 

오류는 이것 뿐만이 아니다.

 

이번에 뜬 에러 메세지는 이거다.

무언가 알아보기 힘들 정도로 길게 써져있는 메세지지만 그렇게 어려운 메세지는 아니다.

해석하자면 문자열의 읽기 전용 속성인 'length'에 할당할 수 없다는 내용.

 

내가 짠 코드 전체를 확인해보자면

import React, { useEffect, useRef, useState } from 'react'
 
function App() {
 
  const [id, setId] = useState('');
  const idRef = useRef('');
  const passwordRef = useRef('');
 
 
 
  // 화면이 렌더링 될 때, 어떤 작업을 하고 싶다! : useEffect!!!!!
  useEffect(() => {
    if (id.length = 10) {
      passwordRef.current.focus();
    }
  }, []);
 
  return (
    <>
      <div>
        아이디 : <input
                  type="text"
                  ref={idRef}
                  value={id}
                  onChange={(event) => setId(event.target.value)}
                ></input>
      </div>
      <div>
        비밀번호 : <input type="password" ref={passwordRef}></input>
      </div>
    </>
  )
}
 
export default App

이런데

 

잘못 된 부분은 if문이었다.

 

      <div>
        아이디 : <input
                  type="text"
                  ref={idRef}
                  value={id}
                  onChange={(event) => {
                    setId(event.target.value);
 
                    if (id.length >= 10) {
                      passwordRef.current.focus();
                    }
                  }}
                ></input>
      </div>

 

id.length = 10 이 식을 id.length >= 10 으로 바꾸니 간단히 해결되었다.

 

 

 

 

< 오늘의 배움 >

 

 

useRef(reference)

 

useEffect : 렌더링 시 어떤 작업을 해주는 것

 

useContext

 

Memo(React.memo) : 컴포넌트를 메모리제이션

 

useCallback : 함수를 메모리제이션

 

useMemo : value에 대한 메모리제이션(함수가 리턴하는 값 자체)

 

DOM(Document Object Model) - (document : 문서, element : 엘리먼트)

: 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것

 

API : HTML 요소에 접근해서 수정할 수 있는 함수

 

redux : 중앙 data 관리소

- Global state 관리하는 것을 의미