- js 기초
1. var 은 재선언 가능,
let, const 는 재선언이 불가능
let 은 변경가능
const 는 변경 불가능
2. Destructuring 문법
array 에서 자료를 뽑아내는 문법 (깔맞춤)
ex) let [a, c] = [1, 2];
3. warning 메세지 없애기
4. 함수 만드는 문법2
() => { console.log(1) }
5. spread operator 문법 (unpacking)
🎈 ...
ex) [...list_name] -> list_name을 unpackgin하여 요소들을 가지고 새로운 array를 만듬
새로운 주소를 가지는 array가 된다.
6. map 함수
🎈 [1, 2, 3].map(fuction(a, i){
return '1233211'
}
1) array 자료 개수만큼 함수 안의 코드 실행
2) 함수의 첫번째 파라미터는 array 안에 있던 자료임
3) 함수의 두번째 파라미터는 array 의 index 임 (반복될 때마다 +1)
4) return 에 무언가를 적으면 array 로 담아줌
7. onClick 핸들러
특정 태그 안에 onClick = { 함수 }
항상 함수명만 적어줘야 함
ex) <span onClick= { 함수 }></span>
8. onChange / onInput 핸들러
입력태그 안에 onChange = {함수}
- 내용을 가져오고 싶을 때.
9. 이벤트 버블링 현상 막기
html 에서 자식 태그의 이벤트가 부모태그들에 대해서도 적용되는 현상
🎈 e.stopPropagation; 사용
10. 배열 추가, 삭제
- 배열 추가 : Array.push(), Array.unshift(), Array.splice()
- 배열 삭제 : Array.pop(), Array.shift(), Array.splice()
push, pop : 끝에서
unshift, shift : 앞에서
splice(index, 0, a) : index 번째에 a 추가(0)
splice(index, num) : index 번째에 num 개 제거
11. 문자열 안에 변수 넣고 싶으면
🎈 문자열 + 변수 + 문자열
12. import, export
- import
🎈 import 작명 from '파일경로'
여러 개 하려면
🎈 import { 변수1, 변수2 } from '파일경로'
** 이 때는 export 했을 때의 변수명 그대로 해줘야함
- export
🎈 export default 변수명
여러 개 하려면
🎈 export { 변수1, 변수2 }
13. 경로
- './~' : 상대경로
- '/~' : 절대경로
14. array 는 [index] 로, object 는 .key 로 접근
15. 배열 생성
v 는 값, index 는 index.
index 기반으로 계산함
파이썬 range(0, shoes.lenght) 랑 비슷하게 작동
16. find, filter
해당 함수에 맞는 요소 반환
id 가 0이면
arr[0] 을 반환함
- find 는 하나만 찾아서 하나 반환, filter 는 해당하는 모든 값 arr 형태로 반환
17. setTimeout( () => { 코드 } , ms ), clearTimeout( setTimeout 객체 )
타이머 생성(해당 시간이 지나면 코드 실행), 타이머 제거
18. 알림창
alert(' 문구 ')
19. .json()은 JavaScript 객체나 배열을 JSON 문자열로 변환하는 메서드,
.parse()는 JSON 문자열을 JavaScript 객체로 변환하는 메서드
20. arrow 함수 () => {return ~} 에서 {return } 은 다 같이 생략할 수 있음
21. JSON
🎈 JSON.stringify(data) : JSON화
🎈 JSON.parse(jsondata) : object화
22. object의 key로 접근시
- key 가 정적 변수일 때 obj.key
- 동적 변수일 때 obj[key]
- JSX 문법
1. 변수는 {} 로 '데이터바인딩'
원래는
이런식으로 짜야됨
어느 곳이든 사용 가능하다. className 까지도 가능
2. class 말고 className 써야한다. class 는 js 내에서 클래스 생성 문법이기 때문
3. style 할때는 style = { { 스타일명 : '값' } }
style 속성 안에서는 무조건 중괄호, 그 안에는 object 자료형식으로
여러 개의 속성을 주고 싶다면 , 써서 나열해주면 된다.
- font-size 안된다.
- 는 js에서 '빼기'를 해주기 때문에, fontSize 라고 해야 한다. (CamelCase)
4. return () 안에는 병렬로 태그를 2개 이상 기입해서는 안된다.
- react
0. 프로젝트 만들기
npx create-react-app "프로젝트이름"
npx는 node.js 실행 패키지인 npm 에 내장되어 있음
npm 은 JS 패키지를 관리하고 배포하기 위한 패키지 매니저임
0. 미리보기 띄우기
npm start
1. state : 자료를 보관할 때 변수처럼 사용
1) import { useState } from 'react';
2) let [a, b] = useState(보관할 자료)
a 는 보관했던 자료
b 는 state 변경 도와주는 함수
Q. 변수와 state 차이점?
일반 변수는 갑자기 변경되었을 때 html에 자동으로 반영이 안된다.
vs state는 가능 -> html 재렌더링됨
2. state 변경법
등호로 변경 못한다.
useState 에서 생성했던 state변경함수를 사용해야 한다.
그래야 재렌더링 잘됨
🎈 state변경함수(새로운state)
ex) setHeart( heart+1 )
3. state 변경 함수의 작동방식
에너지 절약을 위해 기존 state와 같은지 아닌지 비교한 뒤에 달라야 바꿔준다.
그래서 object 나 array 같이 주소를 사용하는 경우 [...name] 와 같은 형식으로 해주지 않을 시
똑같은 주소로 인식, state를 바꿔주지 않는다.
4. 컴포넌트 : 여러 개의 동일 태그를 한 뭉치로 만든것
다른 함수 안이 아닌 바깥에
1) function 만들고
2) return () 안에 html 담기
3) <함수명></함수명> 쓰기 or <함수명/>
4-1. 컴포넌트 만드는 문법 2
let Modal = () => {}
5. fragment : <></>
의미 없는 div 같은 걸 사용하기 싫을 때 태그이름을 비워버려도 가능
6. 어떤 걸 컴포넌트로 만들면 좋은가?
1) 반복적인 html 축약시
2) 큰 페이지들
3) 자주 변경되는 것들
<-> 그렇다고 너무 많이 쓰진 마라. 다른 함수에 있는 state 등을 가져다 쓸 수 없어서 문제가 생기는 경우 O
** 7. 컴포넌트를 선언했지만 html 으로 들고 올 수 없는 경우
-> 함수이름이 대문자로 시작하는지 살펴라. 소문자로 시작할 시 적용이 안된다. (그냥 태그로 보는 듯?)
8. 동적인 UI 만드는 3 step
1) html css로 미리 디자인완성
2) UI의 현재 상태를 state로 저장
let [modal, setModal] = useState(true);
현재, 보이는 상태
3) state에 따라 UI가 어떻게 보일지 작성
html 중간에 조건문을 쓰려면, if가 아닌 삼항연산자 ( 조건 ? 참일 때 : 거짓일 때 ) 를 써야함
{} 안에 if, for 같은 거 못쓴다
map은 쓸 수 있음
-> 반복된 결과가 남기 때문, 리액트는 array 안에 html 담아놔도 잘 보여준다.
* null : 비어있는 html
9. map 으로 html 반복시 warning
태그 내부에 key = ' ' 로 유니크한 값을 주면 된다. ex) i
10. props : 부모 -> 자식 state 전송
1) <자식컴포넌트 작명 = {state이름}>
귀찮으면 state 이름이랑 똑같이 작명해도 됨,
띄어쓰기로 여러개 전달 가능,
그냥 문자도 전달 가능
2) 컴포넌트에서 props 파라미터 등록 후 props.작명 사용
🎈 function Modal(props}{
props.post_title
}
3) props.작명 쓰기 귀찮을 때?
🎈 function Modal({post_title, ...}}{
post_title
}
중괄호 열어주고 전달한 이름 적어주면 됨
11. 리액트에서 state를 변경하는 것은 조금 오래 걸리는데,
js에서는 빠르게 실행될 수 있는 함수들은 먼저 처리해버린다.
ex )
console.log 가 먼저 실행되어서 마지막 입력 글자가 출력되지 않는다.
12. 옛날 컴포넌트 문법
class 사용,
constructor() 안에 super(), render() 사용 => 템플릿
13. bootstrap 사용
npm 사용해서 react bootstrap 설치 (홈페이지 참고)
사용하고 싶은 태그 검색, import, html 복붙
- Button, Navbar, Grid, Card, ...
14. 이미지를 js 에서 불러오고 싶을 때
이미지 경로를 가지고 import 해준다.
or
public 폴더 안에 넣고
/이미지경로
근데 index 페이지가 아닌 다른 하위페이지에 react 프로젝트 넣을 때 오류남
/경로/이미지경로 해주든지
🎈 process.env.PUBLIC_URL + /이미지경로 해주든지
15. router 사용하기
- 설치
npm install react-router-dom@6
- index.js 변경
BrowserRouter로 App 감싸준다
16. router 사용하기 2
- import
- 구조
<Routes> 안에 <Route> 들
🎈 <Route path="경로명" element="내용(html 코드)>
경로에 "*" 넣어주면 그 외에 모든 경로에 작용. 404 페이지 같은거 만들 수 있음
Link는 클릭하면 이동하게 해주는 역할
17. router 사용하기 3
- useNavigete() 는 페이지 이동을 도와주는 함수를 반환함
OnClick 안에 넣어주면 된다
navigate(숫자) 를 넣어주면 양수는 그만큼 앞으로 가기, 음수는 그만큼 뒤로 가기 기능이 됨
18. router 사용하기 4
nested routes, Outlet
<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />
이거랑
<Route path="/about" element={ <About/> } >
<Route path="member" element={ <div>멤버들</div> } />
<Route path="location" element={ <div>회사위치</div> } />
</Route>
이거랑 똑같음
1. 편리
2. 상위 Route 내용도 같이 보여줌
근데 그냥 저렇게만 해놓으면 안보임
상위 컴포넌트에 Outlet 으로 구멍을 뚫어줘야함
요렇게 하면 하위 내용이 저기에 쏙 들어간다
19. router 5
하위페이지 index만 바꿔서 반복해서 나타내기
🎈 path = '경로:url 파라미터'
url 파라미터 한 path 내에서 여러 개 써도 됨
이걸 들고오려면
🎈 useParams()
Q. 여기서 중괄호를 사용해야되는 이유?
A. 객체 디스트럭처링 : 객체 속성을 추출하여 개별적으로 할당 -> object 에서 필요한 값만 추출해서 사용
프로퍼티 : 객체 내에서 키와 값으로 구성되는 요소
여기서는 id 프로퍼티의 값(value) 만을 가져와서 사용한다.
중괄호 안쓰면 객체를 자체를 들고오므로 사용방법을 좀 달리해야함 (id 말고 다른 이름 준다음에 .id 하는 식으로)
20. styled-components
- 설치
뭔 이상한 에러 뜰 때가 있다
$ npm install styled-components
npm ERR! Cannot read properties of null (reading 'edgesOut')
이거 해결하려면
$ npm install styled-components@latest
이렇게 뒤에 @latest 달아주면 됨
- 사용
하나의 컴포넌트를 새로 만드는 느낌.
` ` -> 요 기호를 쓴다. 탭키 위에 있음 (물결표랑 같은키)
${ } 로 뚫어주면 동적으로 사용할 수 있다. props 사용해서 전달해주면 됨. 조건문 같은거 쓸 수 있어서 편함
- 장점
장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있음.
장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않음.
ex) APP.css -> APP.js 안에 컴포넌트 안에 모두 적용돼버림 (하나의 html 만들어지기 때문에)
** 이거 방지하려면 🎈컴포넌트.module.css 라고 하면 되긴 한다
장점3. 페이지 로딩시간 단축됨 (css 로딩 안하니까)
단점도 있다 (js 복잡해짐, 복잡해지면 분리하는데 그럼 css랑 모가 다르냐, 협업 시 이슈 있을 수)
- 기존 스타일 복사
() 안에 기존 컴포넌트 넣어주면 복사도 됨. 추가 커스터마이징 하면 된다
21. 컴포넌트 Lifecycle
1) 페이지에 장착 (mount)
2) 가끔 업데이트 (update)
3) 제거 (unmount)
--> 왜배우냐? 중간에 코드 간섭 가능해서
22. useEffect
js는 위에서 아래로 순차적으로 실행하는데, 이거 쓰면 html 렌더링 후에 동작함
그니까 오래 걸리는 코드는 저 안에 넣자 (어려운 연산, 서버에서 데이터 가져오기, 타이머 장착)
- state 변수 줘도 되고 안줘도 되는데, 주게 되면 해당 스테이트가 변할 때만 실행됨(얘랑 상관없이 mount될 때 한번은 무조건 실행된다)
- 아예 안줄 때 () 는 mount, update 할 때 모두 실행, 빈 배열을 줄 때 ([ ]) 는 mount 할 때만 실행
- return () => {}
useEffect 동작 전에 실행됨 (clean up function)
mount 시 실행안되는데, unmount 시에는 실행됨
23. AJAX 통신 : 새로고침 없이 데이터 주고 받게 해주는 기능 get
axios 라이브러리 사용
.then((result)) 로 결과 가져와서 result.data 하면 데이터만 볼 수 있다
axios 가 자동으로 파싱해줌
.catch() 는 요청 실패했을 때 실행함
24. AJAX post
25. AJAX 여러개 한 번에 요청하기
26. bootstrap 에서 Grid 쓸 때, 한 줄에 col 수를 제한하고 싶을 때
xs, md, ... 이런 것들 조정하면 됨. 전체가 12고 약수로 쪼개서 쓰는 듯? (예상)
27. 전환애니메이션
1) 애니메이션 동작 전 className 만들기
2) 동작 후 className 만들기
3) className 에 transition 속성 추가
🎈 <div className="start end"> 이거랑
🎈 <div className="start"> 이게 반복되게 해줘야함.
4) 원할 때 2번 className 탈부착
처음에는 start 만 주고 end 를 부착할 수 있게 함
useEffect 사용해주면 좋음
5) 근데
이렇게 setTimeout() 로 텀을 줘야함. 왜냐?
리액트 18버전 이상부터 automatic batch 라는 기능이 생겨서, 모든 state 변경 함수 하나만 실행함
flushSync() 이런거 써도 된다고 한다
28. ContextAPI
react 기본 라이브러리
컴포넌트 중첩이 심할 때, 한 컴포넌트에서 자식 컴포넌트와 그 하위 컴포넌트에 한 번에 State 전달가능
1) import
2) Context 생성, export
3) Context.Provider 로 전달하고 싶은 컴포넌트를 감싸고, value 로 State 전달
4) 하위 js 파일에서, 해당 js 파일 import
5) useContext 로 Context 분해
사용하면 끝임. 근데 성능 이슈 (쓸데 없는 재렌더링) 나 사용하는데 불편함 (컴포넌트 재사용 힘듬) 때문에 잘 안 쓰고 다른 외부 라이브러리 쓴다
29. Redux
1) pakage.json 에서 react, react-dom 버전 확인. 18.1 이상이어야 작동함
2) $ npm install @reduxjs/toolkit react-redux 설치
3) store.js 파일 생성, 내용 작성
4) index.js 변경 : Provider 로 앱 감싸준다
하위 컴포넌트 모두가 이제 store 에 있는거 사용할 수 있다. Context 랑 비슷
5) store.js 에서 State 만들기
createSlice() 사용. useState 느낌임. name 에는 state 이름, imitialState 에는 값
6) 등록하기
configureStore() 사용해서 작명 : State이름.reducer 로 등록해야 함
7) 다른 js 에서 사용해보기
a 안에 모든 state가 들어감. a.State이름 등으로 원하는 state 쓰면 됨.
return 에 state.State 이름 하면 걔만 들고옴
30. Redux 에서 state 변경하기
1) state 수정해주는 함수만들기
Slice 안에 reducers : { 함수 } 만들어줌
함수(state) 에서 state 는 현재 state 이다.
2) export 해줌
State이름.actions
3) import 해주고, dispatch(변경함수()) 해서 사용함
31. Redux 에서 state 변경하기 - 2
array / object 의 경우 직접 수정해도 state가 변경 됨
32. Redux 에서 state 변경하기 - 3
state 변경함수에 파라미터 뚫기
파라미터.payload 형식으로 뚫어준다
33. LocalStorage : 브라우저에서 제공하는 저장소
1) key : value
2) 최대 5MB까지 문자만 저장
3) 브라우저 청소해야 삭제됨
<-> SessionStorage : 껐다 키면 사라짐
34. 개발자 도구 Console 에서 LocalStorage 사용가능
localStorage.setItem('age', '20')
localStorage.getItem('age')
localStorage.removeItem('age')
데이터 수정하는 문법은 없음
35. redux-persist : state 를 localStorage 에 자동으로 저장해줌
46. React Query
- 설치
npm install react-query
- index.js 수정
import, QueryClient 선언
Provider 태그로 App 태그 감싸줌
- 사용
return 두개 필요
- result.data : 가져온 데이터, result.isLoading : 로딩 중이면 true, result.error : 에러 나면 true
유용하게 사용할 수 있음
- 틈만나면 자동으로 refetch 해준다. ~신선한 데이터~
- staleTime 으로 refetch 간격 조절할 수 있음
- 실패시 retry 알아서 해줌
- state 공유 안해도 됨 :: 똑똑해서 한번에 가져와서 사용한다 ( 코드 두번이라고 두번 실행 안함 )
- ajax 결과 캐싱 가능함 (5분) :: 기존 성공 결과를 미리 보여준다음에 요청함
- redux-toolkit 설치하면 RTK Query 쓸 수 있음
- 업데이트 사항
라이브러리 이름이 react-query에서 @tanstack/react-query로 바뀌었음 (설치, import 시 참고, useQuery쓸 때 '작명' 말고 ['작명'] )
47. react developer tools : 개꿀툴. 컴포넌트 구조를 볼 수 있음
48. redux dev tools : store 한 눈에 보여줌. state변경 내역 알려줌
49. lazy import
기본적으로 react 는 발행 시 하나의 큰 js 파일에 모든 코드를 넣기 때문에 로딩이 오래걸린다
따라서 바로 쓰지 않는 컴포넌트는 lazy 하게 import 하여 ( 필요할 때 import ) 로딩 속도나 자원을 줄일 수 있음
얘네는 발행할 때도 별도의 js 파일로 분리된다
대신 이 컴포넌트를 사용하는 url 으로 들어갈 때 로딩이 좀 걸림
- Suspense
얘로 감싸주면 로딩중 UI 넣기가 가능함 ( Routes 자체를 감싸도 됨 )
50. 자식 컴포넌트 재랜더링 막기 - memo
memo 함수를 써서 자식 컴포넌트를 선언
🎈 let Child = memo( function() { ~ } )
자식 컴포넌트로 전송되는 props 가 변할 때만 재렌더링 해줌
51. useMemo
🎈 let result = useMemo( () -> {return 함수() } )
컴포넌트가 랜더링될 때만 1회 실행 ( let result = useMemo( () -> {return 함수() }, [state] ) 처럼 state dependency 줄 수 있음 )
52. 1) batch 기능 : state 변경함수가 연달아 있을 때, 종합하여 한번만 일어남
ajax, setTimeout 내부에서는 batching 이 일어나지 않았었는데 (17) -> 18버전부터는 잘 됨
2) useTransition 으로 느린 컴포넌트 성능 향상
- startTransition 함수로 state 변경 함수 등을 감싸주면 성능이 향상된다. (버벅임이 줄어듬)
why?? 해당 코드 시작을 뒤로 늦춰준다
- isPending : startTransition 이 처리중일 때 true 로 변함
3) useDeferrendValue
변경사항을 늦게 처리해줌 (2랑 똑같음)
53. PWA : 웹사이트를 모바일 앱처럼 설치해서 쓸 수 있음 ( 설치하겠냐는 안내 메세지 뜨고, 설치하면 앱처럼 이용가능 )
- 프로젝트 생성 명령어 :: 생성할 때부터 pwa가 셋팅된 프로젝트를 생성해야함
$ npx create-react-app my-app --template cra-template-pwa
- 조건 1. manifest.json 2. service-worker.js :: 이미 만들어져 있다
- manifest.json : 앱 정보임 앱 아이콘이나 뭐 로딩화면 같은거 설정 가능
- service-worker.js : 오프라인에서도 앱을 열 수 있게 도와줌 (html css js 파일을 미리 하드에 저장해두고, 사이트 접속할 때 하드에 있던 걸 씀)
index.js 에서 .unregister() 돼있던 걸 register() 로 바꾸면 됨 -> 빌드할 때 service-worker.js 생김
54. 앱 빌드하는 법
$ npm run build
55. 빌드 된 PWA 잘 되나 확인하려면 만들어진 build 를 vscode 로 오픈해서 index.html 띄우기 ( live server extensions 설치 필요 )
요런 식으로 설치하겠냐고 잘 뜬다
'개발 > REACT' 카테고리의 다른 글
| Chakra UI 설치 오류 (0) | 2024.11.06 |
|---|---|
| bootstrap, mui 사용 시 <body style="padding-right: 17px; overflow: hidden;"> style 추가 버그 (0) | 2023.06.26 |
| react - django 연동 (1) : POST http://127.0.0.1:8000/test/ net::ERR_FAILED (0) | 2023.06.15 |