프론트엔드 정복하기

1) useEffect에서 server에서 데이터 불러오기 : (알맞은 조건을 설정하여..) (axios, find 메서드 사용) 2) if response.data.success 하면 => useState에 data 정보를 저장하기 ex ) [ Product, setProduct ] = useState( [ ] ) => state에 data 전체 정보가 array로 저장된다. 3) State에 mapping한다. Product . map ( (product, index) =>{ return ( { product.name } ) }) const [Products, setProducts] = useState([]) useEffect(() => { let body={category:'인생뷰티'} Axios...

useReducer를 사용하여 여러 개의 인풋 상태를 관리할 수 있다. 기존에는 인풋이 여러 개여서 useState 를 여러번 사용했다. useReducer를 사용한다면 우리가 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name 을 참조하여 setState 를 해준 것과 유사한 방식으로 작업을 처리 할 수 있다. //info.js import React, { useReducer } from 'react'; function reducer(state, action) { return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(r..

https://velog.io/@velopert/react-hooks

1. 숫자, 영어 등을 구분하는 javascript 정규식 https://ryukato.github.io/javascript/2016/01/27/replace-some-text-with-regex.html -숫자 : /[0-9]/gi -숫자가 아닌 모든 문자 : /[^0-9]/g -대, 소문자 영문 : /[a-z]/gi -특수문자 : /[~!@#$%";'^,&*()_+|=>`?:{[\}]/g -공백 : /^\s+|\s+$/g -동일한 문자 연속 3자 이상 : /(\w)\1\1/g 2. 정규식 존재여부 체크 방법 1) replace 함수 이용 replace 함수 예시) text . replace( '기존문자', '바꿀 문자' ) 아래 예제처럼 영어가 아닌 것(^ 표기)이나 영어인 것을 공백('')으로 대체..

useState의 활용 1) 변화를 관리할 때 ex. email, password 입력창 관리 const [ state, setState ] = useState( initialState ) const onStateHandler = function(event){ setState(event.currentTarget.value) } ***initialState : 초기값 -string 값이고, 빈값일 경우 : useState( " " ) -array 이고, 빈 값일 경우 : useState( [ ] ) useEffect의 활용 어떤 상태가 변경될 때마다 rendering 시키는 것. : 끝에 [ ] 값이 변할 때마다 렌더링함 : 끝에 [ ] 값이 비어있을 경우, 페이지 첫렌더링 시 한번만 렌더링됨. 더보기 h..