20210614 React13 : createPortal(특정 요소에 하위 요소 추가하기), forwardRef(후손 ref 사용하기), SPA 배포(Deploy)특징&이해, Serve패키지 배포, AWS S3 배포, Express 배포, SSR 이해, express를 통한 SSR
React 13 React.createPortal : 요소 보내기 React : Portals 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 의도하는 실제 DOM Element(부모)에 자식, 후손 요소들을 어디에서 든지 createPortal로 만들어진 Component를 통해 넣을 수 있음 서로 동등한 위치의 A, B Element라도 A에서 작성한 후손 Element를 B의 후손 Element로 들어 갈수 있게 A에서 작성 가능함 다른 곳에서 집어 넣었다고 하더라도 이벤트 버블링은 portal인지 아닌지 상관 없이 부모 Component로(React 기준으로, 실제 DOM 기준이 아니고) 전달 됨 // Modal.jsx : Portal 사용 import ..
20210613 React12 : Life Cycle 도표 이해하기, Reconciliation, Render 최적화 하기, react의 같은 component 인식, key Prop, shouldComponentUpdate, PureComponent, 함수를 prop으로 전달시 주의, Function Component render 제어(React...
React 12 Life Cycle 도표 React Advanced Optimzing Performance 필요할 때만 render 하여, 최적화 시키는 작업 즉, 불필요한 render를 줄이는 방법 Reconciliation (조정) 대전제 -> 훨씬 효율적으로 Rerender 컨트롤 가능 랜더 전후의 일치 여부를 판단하는 규칙 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 서로 다른 타입의 element를 부모로 하는 Component의 차이 (Unmount, Mount) 같은 컴포넌트()를 render 하지만, 상위 타입이 다르기 때문에 두개는 다르다고 인식 ->..
20210610 React08 : Additional Hooks(useReducer, useMemo, useCallback, useRef), React-router Hooks(useHistory, useParams), Custom Hooks & HOC (useWindowWith, useHasMounted, withHasMounted)
React 08 Custom Hooks customHooks : useWindowWidth() 브라우저 창 가로가 변경 되었을 때 변경된 숫자를 받아오는 hook state를 활용해서 재사용 할 수 있는 hook을 만들어 냄 (따로 관리 함) window.innerWidth -> 현재 브라우저의 가로 값을 가져옴 resize event -> resize 함수 실행 (state에 변경된 width값을 지정) -> state 값이 변경되어 return 값이 width를 rerender 함 // useWindowWidth.js import { useEffect, useState } from "react"; export default function useWindowWidth() { const [width, s..
20210607 React05 : Style Loders, CSS, SASS, CSS module, SASS module, classNames 라이브러리(객체 key module.css로 만들기), 객체 value 생략표현
React 05 React Component Styling Style Loders Style을 적용하기 위한 파일들이 동작하기 위함 배포용 파일로 변화시키기 위한 설정들로 4가지 방식이 있음 CSS, CSS Module, Sass, Sass Module 위의 4개의 type에 webpack에서 loader를 붙이고 설정하여 사용하게 됨 // webpack.config.js // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; CSS, SASS 기..
20210607 React04 : Routing(path, id, queryString 방식) URLSearchParams, query-string 패키지, Switch-NotFound, JSX링크로 라우팅 이동(RRD : Link, NavLink), JS로 라우팅 이동(RRD: history, withRouter, Redirect)
React 04 Dynamic Routing URL을 동적으로 입력하는 방법 Path에 id값 사용 방식 Router에서 Route에 연결한 라우트 Component의 경우 path에 :이름을 붙여서 url을 표현 하게 되면 해당 Component 함수에서 받아오는 인자 (props)의 경우 객체이다. 그 객체는 해당 객체의 match에 params 안에 path로 지정한 이름으로 key를 가지는 key-value의 구조로 가지게 됨 자동으로 params 객체에 이름: '1' 의 item을 가지게 됨 :를 사용하는 경우 필수 요소라서 /profile/:id의 표현인 경우 /profile를 포함한다고 인식하고, 이처럼 따로 라우트 처리를 해줘야 함 // id라는 이름으로 path를 붙인 경우..
20210605 React03 : CRA, ESLint, Prettier, Husky, Lint-staged, CRA코드 이해하기, React Developer Tools, React-Router-Dom, SPA 라우팅 과정, Router 구현하기
React 03 Create React App 본격적으로 App 만들기 Create React App -> 줄여서 CRA 라고 부름 create-react-app.dev : React app을 만드는 CLI 툴 소개 편하게 프로젝트를 생성할 수 있게 도와주고, 그외 여러가지 기능들을 제공함 CRA - 명령어 npx 명령어 : npm 5.2.0 이상부터 함께 설치된 커맨드라인 명령어 앱생성 명령어로 만들어진 프로젝트는 노드 (npm) 기반의 프로젝트임 npx create-react-app 프로젝트이름 : 프로젝트 생성 npm start : dev server 실행 (변경사항 바로 반영 됨) npm run build : build(compile) 해서 production을 만듦 (변경사항 반영안됨, 다시 빌..
20210604 React02 : Event Handling, Component Lifecycle, Lifecycle 변경된 사항 (16.3버전 이후), getDerivedStateFromProps, getSnapshotBeforeUpdate, ComponentDidCatch
React 02 Event Handling HTML DOM 에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어남 JSX에 이벤트를 설정할 수 있음 camelCase로만 사용가능 예) onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수임 이벤트 = {함수}와 같이 씀 실제 DOM요소들에만 사용 가능함 리액트 컴포넌트에 사용하면, 그냥 props로 전달함 Function Component 이벤트 연결 JSX에 바로 이벤트 적고, 해당 이벤트에 함수를 붙여줌 함수 컴포넌트에서는 state, 라이프 사이클을 사용하지 않기 때문에, 상태값을 활용할 수는 없다. function Component() { return ( { console.log("clicked"); }} > 클릭 );..
20210604 React01 : React 개념, Virtual DOM, CSR vs SSR, 리액트 라이브러리, Component(Class, Function), React.createElement, JSX, Props 와 State, Render함수
React 01 React Concepts Component src, class, name, props 밖에서 넣어주는 데이터 html, CSS, JS을 합쳐서 내가 만든 일종의 태그 재사용을 할 수 있는 개인이 커스텀한 완전한 묶음 Component Based Development 화면을 구성하는 부분인 component들이 새로운 component를 구성하면서 개발하는 방식 Component Tree Component Tree를 Dom Tree로 변환 되어 동작함 Dom Tree의 경우 브라우저에 내장되어 있는 표현의 목록임 Component Tree의 경우에는 개인이 내장되어 있는 태그의 조합, 스타일, 동작을 입혀서 재사용 가능 Virtual DOM DOM 을 직접 제어하는 경우 바뀐 부분만 정확..
