form 검색 결과
3 개의 검색 결과가 있습니다.
React.js

[React] formik으로 폼(form) 만들기

formik 소개 formik은 리액트에서 form을 다루는 코드들을 쉽게 작성할 수 있도록 도와주는 라이브러리입니다. formik은 리액트에서 form을 다룰 때 3가지 까다로운(성가신) 점들을 해결해줍니다. 1. form의 state 관리 및 form의 안팎에서 value 접근 2. 벨리데이션(Validation)과 에러 메시지 3. submit 다루기 formik을 사용하면 form에서 사용하는 값들을 formik 내부에서 자체적으로 관리합니다. 고로 state를 따로 선언하고 관리할 필요가 없어집니다. 상태 값들을 formik 내부에서 관리하기 때문에 이 값을 얻기 위해서는 formik이 제공하는 api들을 이용해 함수를 호출하면 됩니다. form과 관련하여 내부에서 관리하는 상태들로는 각 inp..

2022. 10. 17. 08:08
HTML

[HTML & CSS] input과 button의 공통점과 차이점

button 태그가 하는 일은 무엇일까? "어느 날 이런 일을 겪었다. form 태그 안에 form data와 관련 없는 버튼을 만든 후 그 버튼을 눌렀더니 form이 전송되었다. 응? button을 눌렀는데 왜 form이 "submit" 되지?" 위 상황은 button 태그의 type속성의 default값이 submit이라는 사실을 몰랐을 때 할 수 있는 실수입니다. 사실 button태그의 type속성값들은 input 태그의 type속성 값들과 겹칩니다. button 태그의 type속성 값인 submit, reset, button 은 input 태그의 type속성으로도 사용할 수 있습니다. 그러면 더 다양한 type을 제공하는 input만 사용하면 되지, button은 뭐하러 있느냐? 그 이유에 대해서..

2021. 2. 10. 08:00
HTML

HTML form 태그를 사용하여 데이터 전송하기

form 태그를 이용해 어떤 데이터들을 전송할 수 있나요? 이전 포스팅([웹개발 HTML] 사용자가 입력할 수 있는 UI 만들기)에서 input 태그 등을 이용해 사용자가 데이터를 입력할 수 있는 다양한 인터페이스들을 만드는 법을 살펴봤습니다. 여기서 조금의 응용을 더하면 사용자와 웹은 서로 입출력한 데이터를 주고받으며 상호작용을 할 수 있습니다. 예를 들어볼까요? 혹시 mbti 검사를 해본 적이 있을지 모르겠습니다. 저는 최근에 mbti 검사를 웹사이트에서 해본 적이 있는데요. 사용자가 문항마다 답을 선택하면(select UI) 웹에서 결과를 계산하여 최종 결과 페이지를 사용자에게 보여줍니다. 이렇게 사용자가 입력한 데이터를 웹에서 처리하는 것은 처리하는 장소에 따라 크게 두 가지로 구분할 수 있는데요..

2021. 1. 25. 08:00