공식사이트 : https://react-hook-form.com/get-started공식사이트를 보면 유효성 체크 규칙을 7가지(required, min, max, minLength, maxLength, pattern, validata) 제공한다고 명시한다.아

CSR은 서버로부터 받은 HTML, CSS, Javascript파일을 browser side에서 렌더링하는 방식입니다. React나 Angular등 modern frontend frameworks로 만들어진 어플리케이션이 이 방식을 사용합니다.유저가 브라우저에 www.

auto completing은 검색기능을 만들 때 필수적으로 구현해야 하는 기능이다. 알파벳을 하나 이상 input에 입력하면 그 입력값으로 시작하는 추천 검색어가 랜더링돼 user에게 보여지는 것이 핵심이다.입력 알파벳이 하나 이상이면 suggestion list 랜

화면에 보여지는 tab은 총 3개로 클릭할 때마다 배경색이 변하도록 만들었다. list는 tabs.map으로 랜더링하고, index를 이용해 현재 tab이 어떤 탭인지 확인할 수 있도록 했다.tab을 클릭하면 아래 있는 문구도 함께 변경되도록 했다. tabs 배열의 값

싱글 페이지 어플리케이션(single-page-application)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 렌더링 하는 웹 어플리케이션 혹은 웹사이트를 말합니다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으

React는 2013년 페이스북에서 오픈소스로 공개한 자바스크립트 라이브러리로, 페이스북에서 이용하고 있을 뿐 아니라 AirBnB, Uber, Netflix, Instagram 등 우리가 자주 사용하는 웹 어플리케이션 중 상당수는 리액트로 만들어졌습니다.공식사이트는 유

짧은 키워드를 담는 tag component를 먼저 만들었다. 부모컴포넌트로부터 prop을 전달받아 렌더링 할 예정이다.생성은 부모 컴포넌트에서 담당하지만 삭제는 tag 내에 만들어줘야 했다. 물론 deleteTag함수도 prop으로 넘겨 받도록 했다.tag를 추가하는

알림창을 띄울 때, 로그인 등 입력값을 받아야할 때 등 여러 상황에서 Modal이 쓰인다. 가장 기본적인 기능을 가진 Modal을 만들어보고, 최근에 진행하고 있는 project에 적용시켜보기로 했다.'open modal' 버튼에 onClick 이벤트를 적용하고, 버튼

w3school에 들어가면 'How to create a toggle switch'라는 글이 있다. react로 만들기 전 이 글을 참고하며 기능구현을 고민했다.HTML : w3school에는 rounded 버전과 rectangular 버전이 있었다. 라운드를 참고해