SPA란 - index.html 페이지 하나
그래서 index.js에서 login.scss를 import하면
같은 클래스를 가졌거나 중복되는게 있을때 한곳에 모여서 좋지 않다.
variables.scss 같이 공용파일 한사람이 수정하면 다시 push해서 또 pull받고 merge 해야된다.
idx : Math.random() 쓰지마 - 공식문서에도 나와있어
useState는 useState들끼리 top level에서 선언한다.
useNavigate()도 상단에 쓴다 (아래에 써진 코드에서만 참조 가능하니까).
id 사용 지양! class 사용
React에서 컴포넌트를 사용하고, 컴포넌트는 재사용 가능한 UI 단위인데, id는 반복되면 안되고 컴포넌트는 반복되는 경우가 많다
tag 선택자도 !
body태그는 쓸일이 없다 -> div로 사용
index.html에 body가 있는데 그렇게 되면
body - div - body가 되어버림
classname 구체적이고 직관적이게
대문자는 상수 데이터 쓸때 쓴다
a는 외부 브라우저 갈때만 ! 내부는 Link 사용
vh와 %의 차이 :
100%는 부모의 크기만큼 영향을 받는다 (부모의 속성도 지정해줘야한다)
100vh는 내 브라우저의 크기만큼 100%로 (보다 절대적이다)
부모-자식 컴포넌트에서 자식 맨밑에 써주기
아니면 파일 분리해서 import 해주기
(UI 가공되는 공장(function)에 있으면 안돼)
길이가 긴 조건은 변수 만들어서 사용하면 깔끔하다 ! -> 가독성을 높여줌
상수 / 목 데이터
상수는 변하지 않는거
목 데이터 - 틀 안에 백엔드 데이터 가져올수있어
-> 반복되면서 데이터가 변해야하는 부분은 map함수로 구현
출처: soojjung.log
key는 반드시 변하지 않고, 예상 가능하며, 유일해야한다. 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.
출처: React 공식문서
