언어/React4 [회원가입] 정규 표현식과 아이디 일치 불일치 React import axios from "axios"; import { useState, useEffect } from "react"; function Join() { //정규표현식 useState const [id, setId] = useState(''); //중복 id useState const [validId, setValidId] = useState(false); // ID의 정규식 표현:첫글자는 영문 대소문자이며, 나머지는 영문 대소문자, 숫자, 밑줄이 가능하고 //총 4~16글자이다. const ID_REG = /^[a-zA-Z][a-zA-Z0-9-_]{3,15}$/; // 정규표현식 일지하는지 검사 const setIdInfo = (e) => { let id = e.target.value.. 2022. 12. 14. [hooks] useRef const ref = useRef(value) 예시로, const ref = useRef("hi")에서 useRef를 부르면 ref오브젝트를 반환한다. ref 오브젝트는 {current:"hi"} 이렇게 생겼다. ref 오브젝트는 수정이 가능하기 때문에 언제든 우리가 원하는 값으로 바꿀 수 있다. ref.current="hello" 이렇게 사용하면 된다. 반환된 ref 는 컴포넌트의 전 생애 주기를 통해 유지가 된다. 컴포넌트가 계속 렌더링되어도 언마운트되기 전까지는 값을 그대로 유지할 수 있다. 대표적으로 useRef 2가지 상황에 쓰인다. 1. state와 비슷하게 값을 저장하는 저장공간으로 사용된다. state의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화 (리렌더링이 되면 함수가 다시 불려.. 2022. 11. 20. [hooks] useEffect !!중요 useEffect 기본적으로 useEffect hook은 인자로 (())=>{//원하는 작업..}) 콜백함수를 받는다. * 콜백함수란? 다른 함수의 인자로 전달된 함수를 의미한다. useEffect 유형은 2가지만 알고 있으면 된다. 1번째 유형! useEffect( ( ) => {//원하는 작업..} ); 하나의 콜백 함수만 받는 유형 컴포넌트가 렌더링 될때 마다 매번 콜백이 실행 2번째 유형! useEffect( ( ) => {//원하는 작업..} , [value]); : 첫 번째 인자로 콜백 함수, 두 번째 인자로 배열을 받는 유형 배열을 다른 말로 dependancy array라고도 합니다. 매번 실행되는 것이 아니라 컴포넌트가 맨 처음 화면에 렌더링 될때만 실행 또는 배열 안의 요소의 .. 2022. 11. 18. [hooks] useState 1. useState 훅은 state와 setState를 배열형태로 반환해준다. setState를 사용해서 state를 변경할 때마다, 컴포넌트는 다시 렌더링이 된다. const [state, setState] = useState(초기값); 2. state를 변경할 때, 새로 변경된 state값이 이전 state값과 연관이 되어 있다면 setState의 인자로 새로운 state를 리턴하는 콜백함수를 넣어주는게 좋다. (콜백 함수란? () => {}) setState((prevState) => { return newState; }); 3. useState를 사용해서 어떤 무거운 일을 해야한다면 useState의 인자로 콜백함수를 넣어주면 맨 처음 렌더링할 때만 실행되게 할 수 있다. useState (().. 2022. 11. 17. 이전 1 다음