[React] 라우팅 / 렌더링 / 스타일링 / 통신방법

mj·4일 전
0

kbt

목록 보기
2/4

🌀 라우팅/라우트/라우터

  • 라우팅 : 페이지를 전환하는 것 (서빙하는 행위)
  • 라우트 : url별로 어느 페이지 나올지 설정 (주문별 가져다 줄 음식)(경로, 메소드)
  • 라우터 : 페이지 전환 주체 (서빙 알바)

🌀 <link><a>의 차이

- 서버에게 아무 요청을 보내지 않음.
- 통신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()) // 응답을 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(); // 응답을 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 호출
  useEffect(() => {
    fetchData();
  }, []); 
  • 게시물 목록 페이지에서 버튼을 누르지 않았는데도 그 페이지에 들어가자마자 데이터를 가져와 띄운다. (이벤트가 없어도 동작한다)
profile
일단 할 수 있는걸 하자.
post-custom-banner

0개의 댓글