** SSR(server side rendering)

• ssr은 초기 로딩 속도가 빠르고, SEO에 유리.
• ssr은 화면이 전환될 때마다 페이지 리로딩되어 서버에 부담.

react

---

* 참고 용어

SPA(single page application)

: url이 바뀌어도 매번 새로운 html을 불러와 주는 것이 아님.

CSR(client side Rendering)

: 사이트 내에서 url 이동시 서버에서 새로운 html을 받아오는 것이 아니라 클라이언트에서 그리므로 화면 깜빡임 없이 앱과 같이 웹사이트 이용 가능.

단점

• 앱의 규모가 커지면 빌드로 인해 생성된 bundle.js의 파일 크기가 지나치게 커져서 첫 로딩에 오랜 시간이 걸리게 된다. -> 코드 쪼개기로 어느정도 해소 가능.
• SEO(search engine optimization)에 불리 : SEO는 html을 기반으로 작동하는데 csr의 경우 html은 비어있고, bundle.js파일로 존재하기 때문.
  ==> 위와 같은 문제의 극복을 위해 Next.js 프레임워크가 발달
  // 첫 로딩시에는 서버에서 페이지를 받아 렌더링하고, 그 뒤의 라우팅 처리는 CSR방식을 적용.

server Components

---

1. 개념 및 특징

-- react는 state 즉 상태값이 변할 때마다 새롭게 렌더링됨.
-- react에서 state의 변경은 setState를 통해서 가능

[ 상태관리도구의 필요성 ]
-> state는 컴포넌트 안에서 존재
-> state의 전달은 props를 통해 부모컴포넌트에서 자식컴포넌트로 가능
-> 자식컴포넌트가 많아지면 state 즉 상태값에 대한 처리가 어려워짐
-> stats는 자식컴포넌트간 직접적인 전달은 되지 않고, 부모 컴포넌트를 통해 타고타고 내려가야 하므로 props drilling문제 발생 -> 불필요한 렌더링 유발
-> 위와 같은 state값의 효율적 관리 필요성 요구됨.

2. 상태관리라이브러리

1) Context -----------

// context 참고 사이트 https://kyounghwan01.github.io/blog/React/react-context-api/#%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5

2) Redux --------------------

2-1) 순서도

: Action -> Reducer -> Store

• Reducer : Action값을 인자로 받아 각각의 Action에 state 값을 변경하고 그 값을 Store에 전달.
• Store : 상태값이 최종적으로 저장되는 곳, 변경된 상태를 view에 전달.

2-2) Redux hooks

• useSelector
• useDispatch : dispatch(Action)이와 같은 방식으로 Action 값을 Reducer의 인자값으로 전달.

3) Mobx ---------------------

참고사이트 https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/