TIL] 리액트 기초복습

Component에서의 데이터 관리

state

컴포넌트가 가지고 있는 데이터입니다.

자신의 데이터이기 때문에 마음대로 수정이 가능합니다(삭제, 새로 만들기 가능)

클래스형 컴포넌트에는 state가 존재하지만 함수형 컴포넌트에는 state가 없습니다.

하지만 리액트 훅을 사용하면 함수형에서도 state가 사용 가능합니다

props

부모에게 받아온 데이터입니다.

부모에게 받아온 데이터이기 때문에 생성, 수정, 삭제가 불가능합니다.

더욱 자세한 내용은 아래에서 알아보도록 하겠습니다!

---

라이프 사이클

DOM

DOM은 html 단위 하나하나를 객체로 생성하는 모델이며 트리구조로 이루어져 있습니다.

DOM은 트리 구조이기 때문에 하나가 수정될 때 수정할 것을 찾고 전부 수정하게 된다면

쓸데없는 연산이 너무 많이 일어나기 때문에 가상 DOM이 등장하였습니다.

가상 DOM

가상 돔은 메모리상에서 돌아가는 가짜 돔이라 할 수 있습니다.

가상 돔의 동장 방식은 다음과 같습니다.

1. 무언가의 행동에 따라 가상 돔을 메모리에 그려줍니다.
2. 가짜 돔(생성된 돔)과 기존의 돔을 비교합니다.
3. 비교 후 수정이 아닌 갈아 끼워줍니다.

3번에서 갈아 끼운다는 것은 원래 있던 바뀔 것들을 싹 버려버린 후 새 거로 갈아엎는다는 것입니다.

가상 돔은 처음 페이지 진입 시(렌더링 시) 그리고 데이터가 변했을 시(리 렌더링 시) 새로 그립니다.

컴포넌트의 생명주기

컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지를 말합니다.

컴포넌트가 생성되고 -> 수정(업데이트)되고 -> 사라집니다.

사라지는 것은 사용자가 보는 화면에서 사라지거나 사용자의 행동으로 인해 컴포넌트가 화면에서 사라졌을 때를 말합니다!

수정되는 것은 props가 바뀌거나 state가 바뀌거나 부모 컴포넌트가 업데이트되었을 때 또는, 강제로 업데이트했을 경우입니다.!

---

단방향 데이터 흐름

데이터는 위에서 아래로, 부모 -> 자식으로 넘겨집니다.

단방향으로 쓰는 이유는 다음과 같습니다.

부모 컴포넌트의 state가 업데이트되면 자식 컴포넌트가 리 렌더링이 됩니다.

만약 자식 컴포넌트의 state가 바뀐걸 부모 컴포넌트가 props로 받는다면

데이터가 꼬이기 때문에 자식은 부모에게 데이터를 넘겨줄 수 없는 것입니다.

SPA

SPA는 Single Page Application의 줄임말입니다.

싱글 페이지 애플리케이션은 서버에서 주는 html이 1개뿐인 애플리케이션입니다.

즉, SPA는 딱 1번 정적 자원을 받습니다.

전통적인 웹사이트의 경우 1번 카테고리에서 2번 카테고리로 이동할 때 새로운 html을 내립니다.

하지만 SPA의 경우에는 1개의 html을 쓰기 때문에 상황에 맞는 컴포넌트를 줬다가

주소를 보고서 필요한 블록을 다시 쌓아서 보여주는 방식입니다.

html을 1개만 쓰는 이유는 어떤 것 때문일까요?

바로 사용성 때문입니다.

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면

상태 유지가 어렵고 바뀌지 않은 부분까지 새로 불러와 비효율적이기 때문에

html을 1개만 사용하는 것입니다.

하지만 SPA의 치명적인 단점이 존재하는데 그것은

정적 자원을 한 번에 내려받다 보니, 처음에 모든 컴포넌트를 받아와

첫 로딩 속도가 느립니다.

---

리덕스

리덕스를 사용하는 이유는 무엇일까요?

리덕스를 사용하는 이유는 위에서 보았던 단방향 데이터 흐름의 불편함 때문입니다.

단방향 데이터 흐름은 불편하기 때문에 전역으로 하는 상태 관리가 필요합니다.

리덕스의 가장 기본이 되는 개념이 전역 상태 관리입니다.

한마디로 전역으로 저장해놓은 어떤 데이터 모음들을 아무데서나 참조하겠다고 볼 수 있습니다.

리덕스 요소

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

action : 상태에 변화가 필요할 때(가지고 있는 데이터 변경 시) 발생합니다.

actioncreator : 액션 생성 함수입니다. 액션을 만들기 위해 사용하고 action을 return gkqslek.

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

store : 스토어는 리덕스를 적용하기 위해 만듭니다. 스토어에는 리듀서, 현재 애플리케이션의 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다(딕셔너리 형태입니다)

dispatch : 액션을 발생시키는 역할을 합니다. 컴포넌트들이 리덕스에 들어있는 데이터를 바꾸고 싶을 때 액션 생성 함수를 호출합니다. 이 호출을 하기 위해 디스패치를 사용하여 호출합니다.

순서

1. 리덕스 store를 컴포넌트에 연결합니다.
2. 컴포넌트에서 상태변화가 필요할 때 액션을 부릅니다.
3. 리듀서를 통해서 새로운 상태 값을 만듭니다.
4. 새 상태 값을 store에 저장합니다.
5. 컴포넌트는 새로운 상태값을 받아옵니다.

리덕스의 3가지 특징

1. 리덕스는 단일 스토어 규칙을 따르기 때문에 한 프로젝트에 스토어는 하나만 씁니다.
2. store의 state(데이터)는 데이터가 마구잡이로 변하지 않고 불변성을 유지하기 위해 오직 aciton으로만 변경할 수 있습니다.
3. 어떤 요청이 와도 리듀서는 같은 동작을 해야 합니다. 즉, 순수한 함수여야 합니다.

순수한 함수 : 파라미터 외의 값에 의존하지 않습니다.

이전 상태는 건드리지 않고(수정하지 않습니다) 파라미터가 같으면, 항상 같은 값을 반환합니다.

리듀서는 이전 상태와 액션을 파라미터로 받습니다.

---

오늘은 리액트 기초에 대한 이해도가 낮은 것 같아 리액트 기초에 대해 공부를 하였습니다.

확실히 처음 공부했을 때는 정말 너무 어렵게 다가왔었지만

강의를 한번 듣고 미니 프로젝트를 진행하고 다시 복습을 하였을 때 어느 정도 이해가 되고

리덕스의 전반적인 흐름에 대해 알게 된 것 같습니다!

복습은 정말 중요하단 걸 한번 더 느꼈습니다!

앞으로도 열심히 공부해서 포기하지 않고 좋은 개발자가 되기 위해 노력할 것입니다!

파이팅!!👍👍👍✍️✍️✍️