🌀 라우팅/라우트/라우터
- 라우팅 : 페이지를 전환하는 것 (서빙하는 행위)
- 라우트 : url별로 어느 페이지 나올지 설정 (주문별 가져다 줄 음식)(경로, 메소드)
- 라우터 : 페이지 전환 주체 (서빙 알바)
🌀 <link>
와 <a>
의 차이
<link>
- 서버에게 아무 요청을 보내지 않음.
- 통신X, 겉에보기에만 페이지 전환이 일어남.(눈속임)
- 단, 반드시 통신이 일어나지 않는다는 소리가 아님. <br> 만약, link안에 통신이 필요한 코드가 있다면, 그때 통신이 일어남.
- CSR
- js코드를 받음 -> 웹 브라우저는 모든 코드를 다 파악함(모든 것을 이미 알고있는 상태)
- js코드를 받아와 페이지를 먼저 그린 후, 필요에 따라 데이터를 나중에 통신하여 받아옴.
<a>
- 매번 통신이 일어난다.
- 보통 우리 사이트 말고 외부 사이트로 넘어갈때 사용한다.
🌀 CSR / SSR
- SSR : 서버에서 데이터를 포함한 html을 그대로 받아옴.
- CSR : js를 사용해 클라이언트(웹 브라우저)쪽에서 페이지를 렌더링하는 방식.
🌀 라우팅하면서 데이터를 전달하는 방법
- 경로 파라미터
useParams()
url에 실어서 보내는 데이터 /posts/{postId}
- 쿼리 파라미터
useLocation()
?name=jenny
🌀 렌더링
- 컴포트화 : 재사용성을 위해, 함수와 비슷한 느낌~
- 반복 렌더링 :
map()
🌀 스타일링 방법
- 인라인
- 스타일 객체
- styled-components
- 스타일링까지 완성된 컴포넌트
- 컴포넌트에 스타일링까지 결합된 것을 컴포넌트로 쓸 수 있다.
🌀 데이터 통신 방법 / 데이터를 가져오는 방법 3가지
- promise-then
- async-await
- async-await + useEffect
1. promise-then
fetch('http://localhost:4444/hello')
.then((response) => response.json())
.then((data) => {
console.log(data);
setMessage(data.message);
})
.catch((error) => {})
then
: fetch 비동기 작업이 끝나면, 그 때 이 코드를 실행해라.
- fetch는 프로미스 객체를 반환하므로, 이를 json으로 변환해주어야 한다.
- 단점/문제: 기존의 코드 작성방식과 달라 가독성이 좋지 않음. 지저분, 불편, 프로미스 지옥
2. async-await
const fetchData = async () => {
try {
const response = await fetch('http://localhost:4444/hello');
const data = await response.json();
console.log(data);
setMessage(data.message);
} catch (error) {
}
};
- 비동기적 코드를 동기적 코드로 작성할 수 있도록 한다.
- promise-then과 내부적으로 동일. 겉에 보이는 문법만 다름.
- promise-then과 달리, 위에서 아래로... (기존의 코드 작성방식) 가독성이 좋아짐.
- async는 이 구문 안에 await가 있음을 알리는 키워드. 없으면 에러남.
- +) Q.await가 2개일때 무엇이 먼저 실행될까?
첫번째로 작성된 await가 먼저 실행된다. 단, 응답결과가 첫번째 await부터 나오지 않을 수 있음. 실행 순서는 보장하나, 응답 결과 순서는 보장 못함. -> 비동기 특징
3. async-await + useEffect (생명주기 활용)
useEffect(() => {
fetchData();
}, []);
- 게시물 목록 페이지에서 버튼을 누르지 않았는데도 그 페이지에 들어가자마자 데이터를 가져와 띄운다. (이벤트가 없어도 동작한다)