React

클래스 기반 리액트에서 라이프사이클을 다룰 떄 쓰인다 constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드render: UI(jsx)를

https://react.vlpt.us/basic/25-lifecycle.html

this.props.children은 <하위Component> 값 </하위Component> 의 '값'이 props.children의 값으로 들어가게 됩니다.코드

useState useEffect

프로젝트 준비 >1. 콘솔 sass를 사용함 classnames: 조건부 스타일링할 때 필요 react-icons: 리액트에서 다양한 아이콘 사용 가능한 라이브러리 Prettier 설정 프로젝트 최상위 디렉터리에 .prettierrc 파일 생성 아래 설정 복붙하기

컴포넌트가 리렌더링 되는 4가지 경우자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 떄 1\. React.memo 최적화 마지막에 React.memo로 감싸주기 컴포넌트의 props

Prettier 로 코드 스타일을 자동으로 정리하고 싶다면, 프로젝트 최상위 디렉터리에 다음과 같은 파일을 생성한다prettierrcjsconfig.json

import { 모듈 1, 모듈2} from '주소'import 모듈 from 주소

액션 타입액션 생성 함수 리듀서 함수 + 초기값export default 하나만 가능 {}없이 import함 export 여러 개 가능 {}로 import할 수 있음

제너레이터 함수.next()를 할 때마다 yield 앞까지 실행된다.바로 앞 yield는 함수.next( ---여기에 있는 인자값---) 으로 대체된다.재실행 시에도 yield 앞까지 진행된다(즉, 구간별로 yield는 하나다) 유용한 참고서

419페이지 action.name에서 name은 컴포넌트의 prop key를 의미한다. 예제> 리듀서 함수의 action.name:action.value는 각각 name 과 value를 의미리액트 컴포넌트 사용하여 프론트엔드 먼저 구현하기 index.js, app.js

\-api 설계: 어떤 주소로 들어가면 어떤 값이 반환되는지 미리 알아두자. 주소 / RESTAPI/ 서버>클라이언트 정보 /클라이언트>서버 정보 설치: yarn create react-app frontend.prettierrc 파일 추가 .eslintrc.json

https://velog.io/@byjihye/react-github-pages 🌝 React 프로젝트 GitHub Pages 배포하기저는 프로젝트 create-react-app 으로 만들었습니다 :)👀 1. GitHub 저장소 만들기먼저 자신의 githu

상황: state가 너무나 복잡해질 때. 스파게티 코드를 방지하기 위해 리덕스를 사용한다. 다음과 같이 앱을 구성한다. 리덕스 스토어 구성: DUCKS 패턴(액션타입, 액션생성함수, 리듀서 코드 한꺼번에 작성) 액션 타입 정의하기 1) counter 2) todo 액션

jwt 구현 프로젝트 마무리 창 띄우기 포스팅 구현하기

리액트 배포하는 법 https://react-etc.vlpt.us/08.deploy-s3.html몽고db: 어떻게 하는지 앎

코드 스플리팅 정의: 빌드시 모든 게 한꺼번에 불러와지지 않도록 웹팩을 가져와 나누는 것 빌드시 기본 탑재된 SplitChunks 기능의 문제점: 효율적인 캐싱 효과만 있음 a 페이지 방문시 b, c 컴포넌트 정보까지 전부 저장되는 약점 해결방법: 코드 비동기 로딩

참고자료: https://www.youtube.com/watch?v=t7ePHIsKnnI깃허브 : https://github.com/catalinmiron/react-typical사용법은 간단하다

모듈을 설치한다모듈을 가져온다 index.js 혹은 App.js에 다음과 같은 코드를 추가한다 (매우중요) 참고서1: 그저 빛인 블로그 참고서2: 리액트 bootstrap 공식 사이트

참고서: https://create-react-app.dev/docs/adding-images-fonts-and-files/다음과 같이 집어넣는다

구글 폰트를 찾는다.public/index.html 파일에 가서 link를 붙여넣는다. src/app.css 에 다음과 같은 코드를 추가한다. react-scroll 공식사이트 https://www.npmjs.com/package/react-scroll rea

scr/components/Services 폴더 만들기 index.js 와 ServiceElements.js 파일 만들기 index.js 에 다음과 같이 작성하기 1) 컴포넌트부터 추가하기 2) props만들기 3) Icon들 가져오기 3) ServiceCard 복붙해

https://beomsoo.me/issue/Issue-3/

리액트 공식 문서: https://ko.reactjs.org/docs/hooks-effect.html리덕스 공식 문서: https://ko.redux.js.org/

Recoil을 이용해 상태관리를 하던 중 줄바꿈을 해야 할 상황이 발생했다.기존 코드나는 recoil 내부 정보에서부터 줄바꿈이 되어있길 바랬다. 그래서 문자열에 \\n도 넣어 보고, 템플릿 문자열을 써보기도 했다. 응 안돼. 알고보니 react는 각종 보안상 이슈를

https://kyounghwan01.github.io/blog/TS/React/redux-ts/

참고 eslint 파일

참고 : https://jeonghwan-kim.github.io/dev/2019/07/08/react-router-ts.html

https://krpeppermint100.medium.com/ts-useref-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-typescript-uselayouteffect-c9f1cf02

https://bgeun2.tistory.com/30

https://bgeun2.tistory.com/30

e.target.value 가 undefined 로 나옴 https://gmldbd94.tistory.com/57

귀찮게 로컬스토리지에 일일히 저장하지 않아도 된다 ! https://kyounghwan01.github.io/blog/React/redux/redux-persist/#%E1%84%89%E1%85%A9%E1%84%80%E1%85%A2-%E1%84%89%E1%85

"react-transition-group" 는 애니메이션을 줄 때 자주 쓰인다 children props 는 재사용 가능한 컴포넌트를 만든다

내부에 또다른 컴포넌트가 있는 것내부에서 전역상태관리를 사용하는 것 setter함수를 내려주는 것 로직을 포함하는 것 지양을 지양하자

useCallback 사용시에도 리소스가 사용되기에..그러나 공통 훅 사용시, useState 관련 이슈가 생길 시 사용한다

https://stackoverflow.com/questions/53906843/why-cant-react-hooks-be-called-inside-loops-or-nested-function useEffect를 루프로 호출할 순 없으니, tsx문법으로 요소를

env파일 확인해보기

useEffect를 분리하는 것은 생각보다 중요하다 예컨대, 업데이트가 되었을 때 fetch하는 함수와, 그 함수의 값을 기반으로 차트를 생성하는 것은 완전히 다르다ㅡ

loader를 가장 앞에 주고, loading이 되면 display: none

결론 : x이유1 : 디버깅이 힘들다 https://stackoverflow.com/questions/52621169/react-props-should-i-pass-the-object-or-its-properties-does-it-make-much-diffe이

당연한 소리지만 일반 유틸함수 안에 훅 쓰면 안됨. 혹시 빌드가 되지 않고 + 에러따위 뱉지 않는다면 이 케이스를 체크해보자

https://akdl911215.tistory.com/370

https://zereight.tistory.com/961

https://mingule.tistory.com/66

그러니까 svg를 조작하기보다는, react jsx문법을 조작하는 편이 낫다(됨)(안됨)