✅ 리액트란
✨ React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
📌리액트의 특징
- SPA(Single Page Application)
- Component 기반 구조
- one-way Data Flow
- Props and State
- Virtual DOM
📌SPA(Single Page Application)
SPA(Single Page Application)는 서버로 부터 새로운 페이지를 불러오지 않고, 현재 페이지 내에서 동적으로 다시 작성하여 사용자와 실시간 소통하는 웹 페이지 구조 이다.
이러한 페이지의 장점은 서버에서 필요한 데이터를 호출할 때, 필요한 데이터 영역만 호출되기 때문에 불필요한 데이터를 호출하지 않고, 깜빡거림이 없어 부드럽게 동작하여 UX/UI를 좀 더 편리하게 제공한다.
단점도 있다. 웹 어플리케이션의 모든 리소스를 한번에 다운받기 때문에 초기 구동속도가 느린편이다. 또한, SPA는 서버 렌더링 방식이 아닌, 자바스크립트 기반 비동기 모델(클라이언트 렌더링)이기 때문에 검색엔진 최적화(SEO) 이슈가 있다.
📌Component 기반 구조
Component 기반 구조란 한 페이지 안에서 Header, Footer 등 각 부분을 독립된 컴포넌트(Component)로 만들고, 컴포넌트들을 재조립해 화면을 구성하는 것을 말한다.
이런 컴포넌트 구조는 기능단위, UI단위로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지보수가 용이하다. 여러 화면에서 재사용되는 코드를 반복해 입력할 필요 없이 컴포넌트만 임포트해 사용할 수 있다.
📌one-way Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가지기 때문에, 복잡한 앱에서도 데이터 흐름에 변화를 예측 가능할 수 있는 특징이 있다.
React 컴포넌트들은 상위 컴포넌트, 하위 컴포넌트가 존재하는데, 개발은 상향식으로 컴포넌트를 개발하고 페이지를 조립한다. 데이터는 하향식으로 부모에서 자식 컴포넌트로 props를 이용해 인자나 속성처럼 전달한다.
📌Props and State
props와 state는 하향식에 해당하는데, 부모에서 자식 컴포넌트로 props를 이용해 인자나 속성처럼 전달한다.
👉 Props (변하지 않는 값)
props는 부모로부터 받는 데이터이며, 불변성 데이터이다.
쉽게 말해 읽기 전용 데이터이다.✅ 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고, 최상위 부모 컴포넌트만 props를 변경할 수 있다.
👉 State (변하는 값)
state는 컴포넌트 내부에서 선언하며, 내부에서 값을
변경할 수 있다. 주로 동적인 데이터를 다룰 때 사용한다.사용자와의 입력한 이벤트에 따라 얼마든지 데이터의 변경이 가능하다. 예를들어, 인스타그램에 댓글을 달고 삭제하는 부분은 변경할 수 없는 props말고 state로 관리 한다.
단일 컴포넌트만 영향을 끼칠 경우 그 컴포넌트 안에 위치시키면 되지만, 하나의 state를 기반으로 두개의 컴포넌트가 영향을 받을때는 state의 위치에 대해 고민해 봐야 한다.
이 경우 공통 부모 컴포넌트를 찾아 그곳에 위치 시켜야 한다.
✨ state 끌어올리기
리액트의 큰 특징은 위에서 아래로 내려가는 단방향 데이터 흐름이다.
만약 자식에 의해서 부모 컴포넌트가 바뀌는 상황이 온다면
state 끌어올리기(Lifting State)가 있다. 상태를 변화 시키는 함수
자체를 하위 컴포넌트에 props로 전달하여 해결할 수 있다.
(콜백함수와 유사한 구조)✅ 상태가 많을수록 애플리케이션이 복잡해지기 때문에 최소화 하는것이 좋다.
❓ 그러면 구체적으로 어떤 데이터들을 state와 props의 상태로 두는 것이 좋을까.
- 부모로부터 전달된 데이터 = props
- 시간이 지나도 변하지 않는 데이터 = props
- 사용자가 실시간으로 변동할 수 있는 데이터 = state
- 컴포넌트 안에 다른 props나 state를 가지고 한 계산 = props
📌Virtual DOM
가상의 Document Object Model을 말한다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리하는 것을 뜻하는데, React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교하여 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선한다.
