Next.js + React Query를 활용한 z.com clone - 1

Next.js 13버전부터는

App Router와 Pages Router로 분리되어있다.

Pages Router의 구조상의 문제로 할 수 없었던것을

App Router로 구조적인 문제점을 해결하여 만들었다.

 

앞으로는 App Router 사용하는걸 추천

 

 App Router

버그 및 실험적 기능이 약간 존재함.

공통적인 layout기능이 생김, 페이지 권한문제 완화.

React18버전 사용, React18버전부터는 server component가 들어옴

server component를 활용해서 next 서버에서 react를 미리 렌더링하여

client로 보내줄 때 완성된 html을 미리 보내준다.

장점 : html 로딩시간 감소, 완성된html을 받아서 js같은 용량이 감소

단점 : next서버에서 모든걸 처리해서 부하가 많이감. => 서버 캐시데이터를 적극 활용함

 

next.js 란? React위에서 돌아가는 프레임워크

서버가 없어도 next를 활용해서 서버실행 가능

 

https://nextjs.org/docs

Docs | Next.js

nextjs 공식문서

 

 

React 복습

페이지 전환 없이 SPA 구조로 만들길 원함

SPA => 새로고침 하거나 브라우저를 닫지않는이상 데이터가 유지됨

MVC에서 데이터를 많이 다룸으로 인해 대규모 개발에 적합하지 않음

 

angular

Gmail(AJAX)를 angular를 이용해 개발하였다.

SPA에 MVC로 구현하여 앱같은 느낌은 줄 수 있었지만

프론트에서 MVC로 처리함에 있어서 불편한점이 많아 적합하지 않았다.

angular는 2way binding(양방향 소통)으로 부모와 자식간에 서로 데이터를 변환가능

해당문제점을 보완하여 React가 등장

 

react

Flux패턴을 사용하여 1way binding(단방향 소통)으로

데이터의 흐름이 한 방향으로 일관성있게 구성되어있음.(대규모에 적합)

Action -> Dispatcher -> Store -> View -> Action .........

데이터추적이 쉽게 가능. Store가 변경되었을 경우에는 Dispatcher를 확인하여 변경점을 찾을 수 있음.

단점 : 자식이 부모요소를 바꿀 수 없음.

컴포넌트 기반으로 만들어서 합치는 형태로 작성

 

Vite 사용이유 

=> 브라우저가 jsx / tsx파일을 알아듣지 못하여서 여러 jsx파일을 js로 합쳐서 변환해주기 위함.

 

1. 데이터 / 2. 바뀌는지? = > 두가지 모두 만족하면 useState()로 관리

 

jsx에서 반복문 사용을 위해 

데이터명.map((e)=>( <div key={t.id}> return 할 값 </div> )) 의 형태로 작성, key값을 통해서

각각의 리턴값에 id 부여해주는게 기본형

리턴시킬땐 최상위에 <></> 형태로 하나만 있어야함 .

구조상의 문제로 위와같이 할 수 없다면 빈 <></>를 적어준다 (Fragment)

 

jsx if문 작성시

{ 조건  ?  true일때 실행될것 : false일때 실행될것 }

 

react에서는 불변성이 있어서

state의 상태가 변경이되어야 setState를 사용하여 값을 변경해줄 수 있다.

 

함수안에서 state상태변환 이후에 log를 찍으면 해당값이 바뀌지 않는댜 ( 비동기때문이 아니라 batch 때문) 

log를 찍어보려면 함수가 종료된 이후에 밖에서 확인하면됨.

ex ) useEffect에서 [] 안에 바뀐 state의 값을 넣어서 그 값이 바뀔때마다 실행되게끔 해줘야함.

useEffect 나 useState는 함수컴포넌트의 최상위에 선언되야함 컴포넌트안의 함수안에서 선언 안하는게 좋음.

 

state를 자삭한테 넘겨주면 해당 state값은 props가 된다.

함수를 넘겨줄 땐 고차함수를통해 state값을 받아서 넘겨주기.

 

props로 값을 넘겨받아 값을 바꿔줄땐 해당방식으로 작업해야함

 

react 의 대원칙

1. 화면에서 바뀌는 데이터를 상태(state)로 만들자

2. 반복 사용되는 것을 컴포넌트로 만들자

3. 비슷한데 다른 부분을 props로 만들자

4. 화면은 미리 다 만들어두고 보였다 안보였다 한다

 

부모가 자식의 데이터를 바꾸고 싶으면?

= > 데이터를 처음부터 부모의 state로 만들어서 자식에게 props로 내려준다.

자식이 부모의 데이터를 바꾸고싶으면?

= > 부모의 데이터를 props로 받아온 뒤, 부모의 데이터를 바꾸는 set함수도 같이 받아온다.

 

useEffect(() => {

    // 이 컴포넌트가 마운트될 때 실행

    // Component가 true 일 때

    return () => {

        // 이 컴포넌트가 언마운트될 때 실행

        // Component가 false 일 때

    }

}, []);

{showComponent && <Component />}

 

useEffect(() => {

    // data가 바뀔 때 실행

    // 1

    // 3

    return () => {

        // data가 바뀌기 직전에 실행

        // 2

    }

}, [data]);

// data 가 a => b

// a useEffect => a cleanup(return) => b useEffect