TIL] 리액트

SPA

SPA란 Single Page Application을 뜻합니다!

말 그대로 서버에서 주는 html이 1개뿐인 애플리케이션입니다.

보통 웹사이트는 페이지를 이동할 때마다 서버에서 정적 자원을 내려준다면

SPA는 딱 한번 정적자원을 받아옵니다.

기존 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면

상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이었습니다.

SPA는 위의 전통적인 웹사이트의 단점을 보완했습니다!

SPA의 단점은 어떤 것이 있을까요?

SPA의 단점은 딱 한 번 정적 자원을 내려받아 처음에 모든 컴포넌트를 받아옵니다.

따라서, 컴포넌트가 많다면 첫 로딩 속도가 느리다는 단점이 있습니다.

---

라우팅

html은 딱하나를 가지고 있지만 SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있습니다.

그렇다면 SPA는 주소를 어떻게 옮기는 것일까요?

라우팅을 사용하면 됩니다!

---

리덕스

리덕스는 데이터를 한 군데에 넣어놓고, 꺼내볼 수 있게 해 줍니다.

리덕스의 용어를 살펴봅시다!

State : 리덕스에서는 저장하고 있는 상태 값(데이터)을 state라고 부릅니다. (딕셔너리 형태로 보관합니다.)

Action : 상태에 변화가 필요할 때 발생하는 것입니다.

ActionCreator : 액션 생성 함수라고도 부릅니다. 액션을 만들기 위해 사용합니다.

Reducer : 리덕스에 저장된 상태(데이터)를 변경하는 함수입니다.

Store : 프로젝트에 리덕스를 적용하기 위해 만드는 것입니다. 스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다.

dispatch : 액션을 발생시키는 역할을 합니다.

---

애니메이션 효과

애니메이션 효과를 줘야 할 때는 어떻게 해야 할까요?

transition과 animation이라는 스타일 속성을 많이 사용합니다.

transition은 주로 단순한 엘리먼트 상태변화에 쓰입니다!

animation은 주로 다이내믹한 효과를 주는데 쓰입니다!

---

오늘은 어제와 마찬가지로 항해 99 주특기 강의를 들었습니다!

확실히 주특기 강의는 어렵지만 재미있습니다.

아직은 정확한 개념이 잡히지 않아서 여러 번 반복해서 강의를 들어야 할 것 같습니다!

항상 그날 배운 것을 100프로 이해하진 못하지만

열심히 공부해서 부족한 부분들을 채우는 재미가 있는 것 같습니다.

☺️☺️👍👍✍️✍️✍️