뫙뭉

컴포넌트를 새로 생성하고 로컬에서 실행해보았는데 위와 같은 오류가 떴다. 이게 뭔말인가 해서 해당 컴포넌트에 가보니 뜬금없이 useRef와 관련된 한 줄에서 오류가 났다고?? 뭐가 문제인가 해서 5분정도 들여다 보다가 발견한 것은 import의 경로 리액트에서 Hooks의 경로는 'react'이다. 아마 자동완성을 쓰다가 자동으로 import 된 것이 이런 문제를 발생 시킨 듯 하다.

평소 어떤 사이트에 회원가입을 하려 할 때 우리는 유효성을 확인하는 문구를 자주 만나게 된다. 유효성 검사란 요구하는 조건을 만족하는지 확인하는 절차를 말한다. 사진을 보면 아이디의 글자수, 특수문자의 사용 가능 여부, 비밀번호와 일치하는지의 여부, 이것들 외에도 사이트에서 받아야 하는 데이터의 형식들을 제한하곤 한다. 그리고 통과하지 못한 데이터를 제출하면 오류가 발생함으로서 잘못된 데이터가 전달되지 않도록 막는 역할을 해준다. 최근 간단한 회원가입 페이지를 만들어보면서 이런 유효성 검사에 대해 리마인드 할 기회가 있었는데 이런 것들을 공유해 볼까 한다. 정규표현식 유효성 검사를 하는데에 있어 자주 쓰이는 것이 바로 이 정규표현식이다. 그럼 정규표현식이란 뭘까? 정규 표현식 또는 정규식은 특정한 규칙을..

State, 변수의 상태관리 리액트에서는 변화하는 값에 대해 클래스형 컴포넌트에서 state를 이용하여 값을 관리하였다. 함수형 컴포넌트에서는 원래 state를 관리할 수 없었기에 state를 사용할 경우 클래스형 컴포넌트를 선택적으로 사용하였는데 이러한 부분을 개선하기 위해 만들어진 기술이 Hooks. state뿐만 아니라 Life-Cycle-Method 의 사용에도 갖고 있었던 문제점을 리액트 16.8에서 Hooks라는 개념이 도입되면서 useState, useEffect 등으로 손쉽게 함수형 컴포넌트에서도 사용이 가능하게 되었다. state를 이용하는 경우는 매우 다양하다. 간단한 예로 로딩 스피너를 들 수 있는데, 듣기에는 아주 단순해 보이는 이런 경우에도 state로 관리할 수 있다. API 호..

자동완성 기능을 만들어보자! 전에 소개한 아이디어의 중요한 기능 중 하나가 자동완성 기능이었다. 여러 식재료의 이름들을 샘플로 기본적으로 주고, 검색창에 문자를 입력할 때마다 일치하는 재료만 보이게 하는 것이 목표이다. 내가 하면서 고민해야 될 부분은 다음과 같았다. - 모든 아이템은 처음에 보여지는 상태여야 함. - 타자가 한글자씩 입력 될 때마다 일치하는 항목들만 보여야 함. 시행착오 내가 처음 고민했던 방법은 다음과 같다. 미리 만들어 놓은 식재료 data를 받아온다. className에 화면에 보여질 재료들에 active를 부여하여 목록생성 onChange 이벤트를 통해 input에 값이 입력되면 모든 아이템에 active를 지우고 filter해서 active를 다시 부여하면 일치 항목만 남아 있..