프론트엔드 정복하기

이벤트 분류 React가 지원하는 이벤트 마우스 이벤트 onClick, onContentMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp 키보드 이벤트 onKeyDown, onKeyPress, onKeyup 클립보드 이벤트 onCopy, onCut, onPaste 폼 이벤트 onChange, onInpute, onSubmit, onTnvalid 포커스 이벤트 onFocus, onBlur 터치 이벤트 o..

1) a태그를 클릭하면 => 페이지를 이동시키면서, 페이지를 아예 새로 불러온다. => 리액트 앱의 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게 된다. 2) Link 태그를 클릭하면 => Link태그는 HTML5 History API를 사용해서 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 예제) import {Link} from 'react-router-dom' About 참고 사이트 velog.io/@bigbrothershin/React-Router

/hoc/Register_AG_2_Restrict.j import React from 'react'; import {useSelector} from 'react-redux'; export default function(RegisterAG2stepComponent){ function CheckGoTo2step(props){ const user = useSelector(state => state.user); if(!user.agreeSave/* .agreeUsage && !user.agreeSave.agreePersonal */){ alert('잘못된 경로로 접근하셨습니다.') props.history.push('/register_agmall'); } return } return CheckGoTo2step ..

hooks가 등장한 이후로 class 컴포넌트는 잘 사용하지 않는다고 한다. class Component를 hook로 변경해야 할 때가 종종 있으므로 Class Component를 배워보자. 1. 클래스형 컴포넌트는 render( ) 메서드가 꼭 있어야 한다. 이 메서드에서 렌더링하고 싶은 JSX 를 반환한다. >> render( ) { return ( ) } 2. props 조회 props 를 조회 해야 할 때에는 this.props 를 조회한다. const { color, name, isSpecial } = this.props; 3. defaultProps 설정 class Hello extends Component { static defaultProps = { name: '이름없음' }; render..

https://velopert.com/1148

https://ko.reactjs.org/docs/add-react-to-a-website.html 1단계: HTML 파일에 DOM 컨테이너 설치 2단계: 스크립트 태그 추가하기 3단계: React 컴포넌트 만들기 선택사항: JSX로 React 해보기 JSX 전처리기 실행하기 npx babel --watch src --out-dir . --presets react-app/prod : jsx문법을 javascript로 변경하고 싶을 때 마다 위 명령문을 실행하면 된다. : src 파일 내에 있는 문법을 js로 변경한다는 말이다. 따라서 babel화를 처리하고 싶은 파일만 src 파일에 저장한다.