React (20) 썸네일형 리스트형 [REACT] Props & State 개요 -리액트에서 데이터를 관리하는 두 데이터 모델에 대해 알아본다. -컴포넌트는 내부에서 어떤 조건이나 시간에 따라 변화하는 데이터를 state를 통해 관리한다. -리액트는 state 변화를 감지하고 자동으로 리렌더링한다. -state 값은 자식 컴포넌트에 전달할 수 있다. props를 통해 전달된 데이터를 관리한다. -props는 읽기 전용 객체이다. 1. Props -리액트에서 데이터는 주로 HTML 요소의 속성과 같이 리액트 컴포넌트의 속성을 표현한다. *props concept은 리액트에서 re-usable custom components를 구축하는 핵심 concept임!! -함수에 매개변수를 지정하고 호출할 때 인자를 전달하는 것과 같이, 컴포넌트 또한 외부에서 데이터를 전달 받을 수 있다. .. [REACT] SPA & Router 1. SSR vs CSR 1-1) SSR (Server Side Rendering) -클라이언트 요청에 따른 웹 페이지 업데이트 처리를 서버에서 진행한다. 서버는 브라우저로부터 HTTP Request를 받으면 요청한 페이지의 HTML파일 혹은 DB에서 필요한 데이터를 불러와 HTML파일을 업데이트 한 후 브라우저에게 보낸다. 브라우저는 매 요청시마다 새로운 HTML파일을 로드한다. -검색엔진최적화(SEO)에 유리하지만, 초기 웹페이지 로딩 속도가 느리다. 1-2) CSR (Client Side Rendering) -서버로부터 받은 HTML 파일에는 기본 골격만 구성되어 있다. 함께 전달된 스크립트 파일을 브라우저가 읽고 페이지를 화면에 렌더링한다. 업데이트 처리를 클라이언트에서 진행한다. 브라우저는 서.. REACT Intro.2 렌더링 원리 1. Virtual DOM -HTML 자체는 정적인 문서이다. DOM API를 이용하여 문서를 동적으로 만들 수 있다. -DOM을 조작하여 변화를 주면 브라우저는 DOM을 화면에 리페인트 한다. 다시 레이아웃을 구성하고 다시 스타일을 입힌다. -리액트는 실제 DOM의 사본인 가상 DOM을 만들어 전후를 비교한 후 변화된 부분만 리페인트 하는 방식으로 성능을 크게 개선시킨다. -가상 DOM(가상의 UI 요소)을 메모리에 저장하고, 이를 ReactDOM 라이브러리를 통해 실제 DOM과 동기화한다. 2. Reconciliation (재조정) -변경된 새 가상 DOM과 이전의 가상 DOM을 비교하여 바뀐 부분만 실제 DOM에 반영하여 업데이트하는 것을 말한다. -리액트 컴포넌트는 state, props, con.. REACT intro 0.CDD (Component-Driven Development) -리액트는 UI를 컴포넌트 중심으로 구축한다. -하나의 컴포넌트에 HTML,CSS,JS가 모두 포함된다. -재사용성이 높은, 일반화된 컴포넌트 설계를 통해 유지보수, 테스팅 등의 효율을 향상시킨다. -컴포넌트는 선언적(Declarative) 방식으로 정의된다. (선언적이다 -> 원하는 최종 상태를 정의한다) 1. JSX -JavaScript + XML -자바스크립트를 확장한 문법으로 React element를 생성한다. -리액트는 렌더링 로직이 UI 로직과 본질적으로 연결된다라는 사실에서 출발한다. *How events are handled, how the state changes over time, and how the data is p.. 이전 1 2 3 다음
