How to get Data?
Problem1 : 데이터 받아오기
작업을 진행하면 가장 많이 접했던 에러메세지는 data가 null값 또는 undefined로 뜨는 것이였다. 데이터를 받아올때 비동기적으로 받아오기 때문에 생기는 문제였다. useEffect로 데이터를 받아오기 전에는 return문 안의 JSX에 우선적으로 렌더링이 되기 때문에 데이터 값을 가져오려고 하면 오류가 나는 것이였다.
Problem2 : 초기 데이터 설정해주기
초기데이터(defalt값)를 어디에 설정해줄 것인지, useState로 데이터를 받을 경우 초기값은 어떻게 세팅할 것인지에 관해 정리가 잘 되지 않았다.
Solve1 : 초기 데이터 설정은 useState의 초기값을 전달
해당 방법이 항상 최적의 방법은 아니겠지만, 기본값(로딩전에 보여질 이미지 등)을 useState의 초기값에 받아올 데이터의 형식에 맞춰 설정해주면 아래와 같은 장점이 있다.
- 초기값을 return안에 삼항연산자 혹은 단락평가로 각각 설정해주지 않아도 된다.
- useState의 데이터에 초기값이 있을 경우 데이터를 받아오기 전에 기본값으로 보여지기 때문에 데이터가 없다는 오류가 생기지 않는다.
Solve2 : useState에 데이터를 받아온후 setState에 데이터 값을 설정해주고 return 문에는 state를 데이터로 사용
fetch해온 데이터를 바로 사용하는 것이 아니라 state에 세팅을 해준후 사용을 해주면 기본 데이터 값이 data로 설정이 되었다가 데이터가 받아와지면 받아와진 data로 바로 연결이 가능하다.
CSS module
CSS 모듈을 사용하면 다른 파일을 오염시키지 않고 특정 파일에만 css를 적용시킬 수 있다.
파일이름.module.css로 파일을 생성한 다음 적용할 파일 상단에import styles(변경가능) form '/src/../파일이름.module.css'를 입력한다. 그리고 태그의 클래스 네임을className = {styles.클래스이름}로 작성하여 사용한다.TIP1) 클래스 이름을 여러개 지정해주고 싶으면?
className = {`${styles.클래스이름} ${styles.클래스이름}`}className = {[styles.클래스이름, styles.클래스이름].join(' ')}
- 위와 같이 템플릿리터럴을 사용하여 클래스 이름을 여러개 사용할 수 있다.
<div className={styles.myClass}>에서styles.myClass는{myClass: "myClass"}식의 객체값을 의미한다. 즉<div className="myClass">과 기능적으로 동일하다고 볼 수 있다. (JSX이므로 양옆 {}를 제외하고 반환되는 값은 문자열이라고 생각하면 된다)TIP2) CSS 모듈 내려주기
- 컴포넌트 자체에 스타일을 주고 싶거나 특정 컴포넌트로 css모듈을 내려주고 싶을 경우
<Components style={style}>로 속성값을 전달해주고 자식 컴포넌트에서 props로{style}을 가져와서className = {styles.클래스이름}처럼 사용할 수 있다.- 컴포넌트 자체에 style을 주고 싶을 경우 받아온 자식컴포넌트의 최상위 태그에 스타일을 지정해주면 된다.
- 단, 자식 컴포넌트에서도 css모듈을 사용하고 있을 경우
import Childstyles form '/src/../파일이름.module.css'로 지정해주고className = {Childstyles.클래스이름}등으로 style이름을 다르게 지정하여 구분해준다.
vite 배포
- 절대경로 사용(상대경로 사용시 배포 오류)
npm run build,npm run preview로 빌드 미리 확인하기- 최상위에
netlify.toml파일 생성 후 아래 코드 입력[[redirects]] from = "/*" to = "/index.html" status = 200Basic build settings (Netlify)
- Build command: npm run build
- Publish directory: dist
