일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- width
- swiper
- getBoundingClientRect
- mousemove
- Animation
- localstorage
- NAV
- 반복문
- Sticky
- React
- scrollevent
- 이벤트리스너
- scroll
- scrollY
- 애니메이션
- classList
- insertAdjacentHTML
- swiperjs
- 스크롤
- Hover
- forEach
- html
- pointermove
- For
- input
- JavaScript
- NodeList
- 확장성
- css
- addEventListener
- Today
- Total
ZeroToHunnit Coding
[React] 1일차 일기 본문
React 처음 까는거부터 난관이긴 했는데 이 때 너무 멘붕이었어서 담에 새로 프로젝트 만들 때 React 까는거 기록해놔야겠음. 요거는 뭐 그냥 공부한거 정리하고 주저리주저리 쓸거임.
1. React깔면 App.js에 function App() {}안에 짜면됨.
2. 그냥 html에서는 class=''로 쓰면 되지만 리액트에선 className=''로 써야함.
3. 변수로 저장해서 {변수명}으로 쓸 수 있음
4. 그냥 변수말고 useState라는 것도 있음. 처음에 useState쓰면 제일 위에 import useState같은거 자동으로 생김. 안생기면 import { useState } from 'react' 넣어줘야함.
5. useState문법은 let [변수명, 변수 다루는 함수명] = useState(자료); 이런식임.
6. state는 언제 쓰냐면 변경사항이 많은 변수를 쓸 때 사용함. 안바뀔거같은거는 그냥 변수에 담으면 됨.
7. 그냥 변수를 변경하려고 하면 html에서 바로 안바뀜. 그래서 변수 바꿀 때 state문 써야됨.
8. array나 object 자료 변경할 때 바로 변경하면 원본이 훼손되기 때문에 copy본을 변수로 만들어주고 수정하는게 좋은 관습임. 근데 [...변수 다루는 함수명] 이렇게 해줘야함.
9. html 요소중에 클릭이벤트를 사용하려면 태그 바로 옆에 onClick = {() => {}} 쓰면된다. 함수 안에서 등호쓰면 안되고 state문의 변수를 다루는 함수로 다뤄야함.
10. component는 html을 깔끔하게 만들어줄 수 있음. 함수로 만들고 <함수명></함수명> or <함수명/> 요렇게만 바로 써주면 함수로 만들어 놓은게 바로 들어옴.
11. 컴포넌트 만들 때 함수 안에 만들면 안됨. 애초에 html을 넣고 있는 장소가 App이라는 함수 안이기 때문에 완전 바깥에 만들어야함.
12. 보통 컴포넌트는 함수명을 첫번째 글자로 대문자를 씀. 알고보면 html짜는 함수도 컴포넌트인걸 알 수 있음.
13. 반복적인 html을 축약하거나, 큰 페이지, 자주 변경되는 것들을 컴포넌트화 시켜주면 좋음.
14. 근데 state문이 들어있는 거는 컴포넌트 만들지마셈. state도 변수이기 때문에 함수의 범위때문에 오류남.
15. function ComponentName (){return()} = const ComponentName = () => {return()}
16. /*eslint-disabled*/ 이거쓰면 warning 다 없애줌. warning이 생기는 이유는 import나 변수가 지정되어 있는데 써있지 않으면 생김.
'React 일기' 카테고리의 다른 글
[React] 6일차 일기 (0) | 2024.01.19 |
---|---|
[React] 5일차 일기 (0) | 2024.01.18 |
[React] 4일차 일기 (0) | 2024.01.16 |
[React] 3일차 일기 (0) | 2024.01.13 |
[React] 2일차 일기 (2) | 2024.01.12 |