[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나 변수가 지정되어 있는데 써있지 않으면 생김.