front-end/React
-
리액트 로그인 유효성 검사 방법 3가지front-end/React 2023. 10. 30. 10:18
1. input 태그 고유 속성 사용 required 내용이 입력되지 않으면 전송이 불가능합니다. 보내기 pattern 정규식 패턴을 넣을 수가 있습니다. 추가적으로 title 속성을 넣어 사용자에게 형식을 알려줄 수가 있습니다. 생년월일 : 보내기 minlength, maxlength 최소, 최대 글자를 제한이 가능합니다. 보내기 2. hook으로 직접 만들기 retrun 값을 주거나 메시지를 표시하게 하거나 중복 검사 등등 넣을 수가 있습니다. // 생략 if (email === '') { // 이메일이 비어있는 경우 오류 메시지 설정 setErrorMessage('이메일을 입력하세요.'); } else if (!emailPattern.test(email)) { // 이메일 형식이 올바르지 않은 경우..
-
React Redux state 변경하기front-end/React 2023. 10. 15. 22:27
1. 함수 만들기 changUser라는 함수를 작성을 해야 됩니다. let user = createSlice({ name : 'user', initialState : 'SIM-TOO', reducers : { changeUser(state){ return 'user1004' } } }) 2. 함수 export 하기 export let { changeUser } = user.actions 3. 함수가 필요한곳에 불러오기 import { useDispatch, useSelector } from "react-redux" import { changeUser } from "./store.js" function App() { let test = useSelector((state) => { return state }..
-
React Redux 설치, 세팅, 사용하기front-end/React 2023. 10. 15. 22:12
1. Redux 설치하기 npm install @reduxjs/toolkit react-redux 2. Redux 세팅하기 store.js파일 만들기 src/store.js에 기본 세팅 입력하기 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) index.js 파일로 이동하기 Porovider와 store.js 를 import 하기 Porovider로 감싸기 // 생략 import { Provider } from "react-redux"; import store from './store.js' const root = ReactDOM.createRoot(document.getElem..
-
One-way reactive data flow 와 Context APIfront-end/React 2023. 8. 11. 14:13
1. 단방향 데이터 흐름(one-way reactive data flow)의 장단점 단방향 데이터의 장점 관리가 용이하다 DOM가 궁합이 좋다 안정성이 보장이 된다. 단방형 데이터 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없다 - props로 데이터 전달하면 생기는 문제점은? 최하단 컴포넌트에서 최상단 있는 컴포넌트에 데이터를 전달할 경우 여러 컴포넌트를 연달아서 props를 전달해야 한다(props drillong) 하위 > 상위 데이터 전달하는 과정 복잡하며, 많은 단계를 진행 할수록 실수도 잦아진다. context 라는 데이터 보관함을 통해 전역적으로 관리하는 방법이 나왔다. 2. Context API 장단점 장점 전역 상태 관리에 용이하다. 중첩 컴포넌트에 건편한 전달이 가능하다. 컴..
-
ES7+ React 확장 프로그램 단축키front-end/React 2023. 8. 8. 13:59
1. 확장 프로그램 설치 설치를 통해 React의 사용이 더욱 편리해진다. rce : class componet 생성 rafce : allow function component 생성 rfce : function component 생성 2. 단축키 rfce + enter import React from 'react' function rfce() { return ( rfce ) } export default rfce rafce + enter import React from 'react' const racfce = () => { return ( racfce ) } export default racfce rce + enter import React, { Component } from 'react' export ..
-
React 에서 이미지 가져오기(img태그)front-end/React 2023. 8. 7. 16:56
1. 외부링크 방식 HTML 방식과 동일하다 return ( 외부링크 방식 ) 1. 내부 링크 방식 내부 링크 src 방식 src 폴더 이용하기 import 이미지 변수 from '경로' import 내부링크변수 from '링크주소' /* 중략 */ return ( 내부 링크 src 방식 ) 내부 링크 public 방식 public 폴더는 서버와 계속해서 통신을 진행하고 있기 때문에 폴더 안에 저장하는 것 만으로도 고유주소를 갖게 됨(업로드) 해당 주소 값을 가져와서 사용 ex) http://localhost:3000/img/이미지1.jpg return ( 내부 링크 public 방식 )
-
React Statefront-end/React 2023. 8. 7. 16:44
1. 컴포넌트와 프로퍼티 컴포넌트(Component) 리액트를 이루는 앱의 최소단위이다. 대문자로만 시작해야한다. 이유 : 기존 HTML 태그(DOM요소)와 구분을 하기 위해서 내가 직접 커스텀하는 나의 태그 프로퍼티 (Props) 상위컴포넌트가 하위컴포넌트로 값을 전달할때 사용한다. 상위 컴포넌트에서 보낸 데이터를 하위 컴포넌트에서 받는 방법 함수의 형태이기 때문에, 값은 매개변수를 통해서 받는다 매개변수 상위 컴포넌트에서 값을 입력하고 하위 컴포넌트에서 값을 읽어온다. - React Event return 문 안에 DOM 요소에 이벤트 속성 : onClick={함수이름} 만약 함수 이름이 따로 없고, 바로 작성하고 싶은 경우? onClick = { ( ) => { } } DOM 요소에만 이벤트 걸 수..
-
React 코드 2번 실행 되는 이유(Strict Mode)front-end/React 2023. 8. 7. 08:58
1. StrictMode index.js에 있는 React.strictMode가 켜져 있을 경우 2번씩 실행이 된다. 개발 모드에서만 활성화된다. 프로덕션 빌드에는 영향을 미치지 않는다. 2. 모드 활성화를 통한 장점 레거시 문자열 ref의 사용에 대한 경고 레거시 context API 검사 예상치 못한 부작용 검사 권장되지 않는 findDomNode 사용에 대한 경고 - 자세한 내용에 대한 React 문서 사이트 https://ko.legacy.reactjs.org/docs/strict-mode.html