본문 바로가기

react5

[React] useRef 와 useState 개념, 차이 전에 정리하려고 했던 useRef(), useState() 차이를 설명해보겠습니다. ✔ 개념 useState( ) 란? const [state, setState] = useState(initialState); 상태 유지 값(state) 과 그 값을 갱신하는 함수(setState) 를 반환합니다. setState 함수는 state 를 갱신할 때 사용합니다. initialState 인자는 초기 렌더링 시에 사용하는 state입니다. 그 이후의 렌더링 시에는 이 값은 무시됩니다. const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; }); // 예시 co.. 2022. 10. 18.
[Git] CI/CD 자동화 배포, 리액트 aws S3 에 자동으로 배포하기 환경 및 도구 - Window - VScode - React - Aws 1. aws IAM 권한 추가 - aws IAM -> 사용자 -> 권한 추가 -> CloudFrontFullAccess, AmazonSeFullAccess 권한 부여하기 2. aws_access_key 확인하기 - 윈도우 powershell 에서 본인 aws_acceses_key 확인 - aws configure 명령어로 확인 - type .\.aws\credentials 명령어로 id, key 전체 확인 - key가 여러개면 aws s3 랑 연결된 키 확인 후 등록 PS C:\Users\admin> aws configure AWS Access Key ID [****************EYQX]: AWS Secret Access K.. 2022. 3. 9.
[React] webpack 설치하기 1 create-react-app 명령어 없이 webpack 설치하기 1. npm init 전부 엔터치다가 author 만 입력 author : 본인이름 - > package.json 파일이 생성된다. 2. npm i react react-dom i : 설치 단축어 package.json 파일의 dependencies 에 생성된다 3. npm i -D webpack webpack-cli -D : 개발할때만 쓰인다를 의미하는 옵션. 실제 서비스에는 웹팩 필요 x package.json 파일의 devdependencies 에 생성된다. 4. npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader npm i react-refresh @pmm.. 2022. 2. 15.
[React] 리액트 기본 개념 1. React 에서 사용하는 기본개념 공부 State : 바뀔 여지가 있는 부분, 변하는 부분 ( 버튼클릭 시 ~~로 변한다) setState : 수동으로 바꿔야 하는 부분 onSubmit : 주로 form 태그가 있을 때 사용 onClick : form 없이 버튼만 클릭할 때 사용 jsx : js + xml Node : 자바스크림트 실행기. 서버x 2. class 와 hooks 의 차이 - class setState 가 일어날 때마다 렌더링된다. Render 부분만 렌더링 된다. - hooks hooks 로 함수 만들어서 실행하면 함수 전부가 렌더링된다. class 보다 더 오래 걸릴 수 도 있다. 3. 함수를 사용하는 이유 rendering 할 때 마다 함수를 새로 만들면 낭비이기 때문에 함수 따로.. 2022. 2. 15.