Frontend/리액트 개발 꿀팁

formik

Formik? React로 웹을 만들다보면 우리는 사용자에게 다양한 인풋을 받게 된다. 이때 모든 인풋을 각각의 state로 관리하면 코드가 매우 지저분해질 수도 있다. Formik을 사용하면 이러한 form에 대한 state관리가 굉장히 편해진다! (나는 리덕스로 dynamic form을 만드려고 삽질을 했었다..) Formik은 리액트 폼의 세가지 어려운 부분을 쉽게 처리할 수 있도록 도와준다! form 상태의 안밖에서 값 가져오기 유효성 검증 및 에러 메시지 폼 제출 조작 우선, 아래 명령어를 이용하여 formik을 설치하자. // npm npm install formik --save // yarn yarn add formik https://formik.org/ Formik React hooks a..

map, key prop

map 리액트에서 동적인 배열을 렌더링 할 때는 내장함수 map()을 사용한다. 배열이 고정적이지 않고 배열의 인덱스를 하나씩 조회하면서 렌더링하는 동적인 방법에 map()을 사용한다는 의미이다. 리액트에서 동적인 배열을 렌더링해야 할 때는 map을 사용하여 일반 데이터 배열을 리액트 엘리먼트 요소로로 이루어진 배열로 변환해서 리턴해주면 된다. import logo from './logo.svg'; import './App.css'; function App() { const list = [1, 2, 3, 4, 5]; return ( {list.map((item) => { return( div 태그 ); })} ); } export default App; 하지만 콘솔에 아래처럼 key라는 props가 없다..