[React] 시작하기
1.React 개발 환경
Node.jsInstallernvm - Node version 변경Browser (Chrome)GitVSCode파일을 다운 받는 경로를 사용하는 경우현재 경로에 React 시작
2.React 라이브러리
reactDOM.render { React 컴포넌트 } - JS, JSX → <HTML Element>React & ReactDOM CDNCDN 링크 – React
3.React Component
기본적인 함수 형태return -> react.CreateElement 하기 위해 JSX 형태로 returnarrow 함수 특징 : return만 존재 시 return과 중괄호 생략 가능📌 1. 태그 이름 문자열 type가상 DOM📌 2. React Componen
4.JSX & babel
📌 babel\[https://babeljs.io/setup\`\`\`jsx최상위 요소가 하나여야 함최상위 요소 리턴하는 경우, ()로 감싸야 함자식들을 바로 렌더링하고 싶으면, <>자식들</> 사용 ⇒ Fragment자바스크립트 표현식을 사용하려
5.Event Handling
리액트에서 지원하는 이벤트 종류ClipboardFocusFormSelectionUIMediaAnimationKeyboardCompositionMouseTouchWheelImageTransitionReact SyntheticEvent https://legacy.
6.Props & State
props : 부모 컴포넌트에서 자녀 컴포넌트에게 주는 데이터State : 컴포넌트 내부에서 변경할 수 있는 데이터둘 다 변경 발생 → 렌더가 다시 일어날 수 있음Props와 State 바탕으로 컴포넌트 그림 & Props와 State 변경 시 컴포넌트 다시 그림컴포넌
7.Filter
&& 연산자를 사용할 시조건부 사용식을 사용할 시변수를 선언 → IF문을 사용한 제어
8.Component Styling
새로운 useState 설정setIsValid의 True값과 False값을 제어하는 IF문 사용style에 조건문을 적용하기삼항 조건문: 조건 ? true : falsesetIsValid → true로 설정class에 동적 기능 적용하기
9.React Hooks
React Hooks?Class 없이 State를 사용할 수 있는 새로운 기능HOC란 무엇인가요?컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수입니다너무나 많은 HOC를 사용하게 되면 Wrapper가 너무 많아지는데 그걸 Hooks에서는 어떻게 처리하나
10.React 확장 프로그램
리액트 프로파일러를 이용한 성능 측정하기React Profilers를 이용해서 성능을 측정하기 위해서 두 개의 컴포넌트를 생성한 후에 성능을 비교폴더 설치 -> 리액트 설치 -> 전체 구조 생성가짜 데이터 가져오기원격 APIhttps://jsonplacehol
11.PostCSS & AutopreFixer
코드 가독성 향상 (Increase code readability)Use Tomorrow’s CSS today!The end of global CSS이름을 중복하지 않고 적절한 Class 이름을 정해 줌Avoid errors in your CSS최신 CSS 린터인 st
12.React snippet
리액트 가져오기 > #### 리액트 + 컴포넌트 가져오기 > #### import a default module (기본 모듈 가져오기) > #### 명명된 함수 > #### React 클래스 컴포넌트 생성
13.useRef를 이용한 변수 관리
변수 관리특정 DOM을 선택할 때 사용하는 React Hooks 입니다state를 사용해서 state가 변하면 컴포넌트가 다시 렌더링되지만 ref를 사용하면 렌더링이 되지 않는다State vs Ref\-> State는 값이 변할 때마다 렌더링이 되지만 Ref는 값은 유
14.Image lazy loading
실제로 화면에 보일 필요가 있을 때 로딩을 할 수 있는 테크1\. js Event2\. Intersection Observer API 이용해 구현3\. 브라우저 native Lazy Loading 이용 -> loading 속성Lazyimage.jsx import 후 u
15.useDebounce Custom Hooks
검색 입력 시 입력 결과가 나타날 때까지의 지연이 존재이 바운스라는 Fucntion에 의해 제어사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 Keyup 이벤트의 처리를 지연 이렇게 하면 UI 코드가 모든 이벤트를 처리할 필요없이 서버로 전송되는 API 호출 수도
16.React Portal로 모달 생성
modal 창이 열렸음에도 불구하고 Z-index 2인 div가 모달 창과 함께 나타나는데,이는 모달이 Z-index가 1인 부모를 갖고 있기 때문에 Z-index를 1000으로 설정해 줘도 부모에게 해당 값이 상속된다이를 해결하기 위해 Portals를 사용한다이벤트
17.react-hook-form을 이용한 회원가입
https://react-hook-form.com/ 설치 useForm 가져오기 onSubmit 함수 생성과 사용 Register로 등록하기 유효성 검사 > 이메일 유효성 검사 정규식 value: ^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$ , > 비밀번호 유효성 검사 정규식 value: /^(?=.[A-Za-z]...
18.Firebase Athentication
Firebase 프로젝트 생성 후 Firebase 설치 및 SDK 추가Form으로 함수와 state 넘겨 주기Form으로 함수와 state 넘겨 주기
19.리덕스 store 생성하기
스토어(Store): 애플리케이션의 상태를 보유하고 관리하는 객체입니다. 상태는 단일 객체 트리로 표현되며, Redux 스토어에서 관리됩니다.액션(Actions): 애플리케이션에서 스토어로 데이터를 보내는 방법입니다. 액션은 일종의 이벤트 객체로, 애플리케이션에서 상태