React 간단한 기능들

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

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

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

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

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