리액트
리액트는 MVC나 MVVM 아키텍처를 사용하는 프레임워크와 달리, 오직 View만 신경쓰는 자바스크립트 라이브러리이다.
데이터가 변할 때마다 뷰에 어떤 변화를 줄지 고민하는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링한다.
단방향 데이터 바인딩
단방향 데이터 바인딩이란 한쪽 방향으로만 제어가 가능한 것을 의미한다.
사용자의 입력에 따라 데이터를 갱신하고 화면을 업데이트 해야 하므로 단방향 데이터 바인딩으로 구성하면, 데이터의 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해주어야 한다.
장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능,
데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움
단점: 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함(사용자가 x)
선언형 프로그래밍
명령형 프로그래밍은 프로그래밍을 할 때 어떻게(How)에 집중하는 것을 말하며 선언형 프로그래밍은 무엇(What)에 집중하여 프로그래밍을 하는 것을 말한다.
//명령형
<ul id=”list”></ul>
<script>
var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");
for(var i = 0; i < arr.length; i ++) {
var child = document.createElement("li");
child.innerHTML = arr[i];
elem.appendChild(child);
}
</script>
//선언형
const arr = [1, 2, 3, 4, 5];
return (
<ul>
{arr.map((elem) => (
<li>{elem}</li>
))}
</ul>
);
map이 어떤 로직으로 구현되는지 알 필요가 없다.
이미 메서드 안에 서술되어 있기 때문에 구체적인 절차는 신경쓰지 않고,
추상화된 메서드를 사용하고 싶을 때 선언만 하면 되는 것이다.
즉 선언형은 명령형을 추상화 시킨것이다.
JSX
자바스크립트의 확장 문법으로, React Element를 생성한다.
JSX 코드는 번들링 과정에서 Babel을 통해 일반 자바스크립트 형태의 코드로 변환된다.
function App(){
return (
<div>
Hello react
</div>
);
}
//jsx
function App(){
return React.createElement("div", null, "Hello react");
}
//javascript로 변환
위 코드에서 JSX 코드와 바벨을 통해 변환된 코드를 비교했을 때 JSX 코드가 가독성이 높고 작성하기도 쉽게 느껴진다.
Component
Component는 독립적인 단위의 UI요소를 말한다.
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만든다.
한 페이지 내에서도 여러 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.
따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.
class App extends Component {
render() {
return (
<Layout>
<Header />
<Navigation />
<Content>
<Sidebar></Sidebar>
<Router />
</Content>
<Footer></Footer>
</Layout>
);
}
Virtual DOM
돔을 추상화시킨 자바스크립트 객체이다.(dom의 사본)
특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는 다음과 같다.
1.데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
2.변화전의 가상돔과 변화된 가상돔을 비교한다.
3.바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한번만 수행
DOM 전체를 매번 리랜더링했던 이전 방식의 비해 빠르게 애플리케이션의 규모가 클수록, 데이터의 변경이 많을수록 더 큰 힘을 발휘한다.
DOM
DOM은 브라우저가 자바스크립트가 이용할 수 있게 html태그들을 트리구조로 만든 "객체 모델"
props, state
- Props
props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. props는 읽기 전용 데이터이며,
자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
- state
state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있는 데이터이다.
state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
spa + csr
화면간 인터렉션이 부드러워 사용자 경험이 좋다(앱같은 사용자 경험을 가질수있음)
