Web Study/처음만난리액트4 SOAPLE 처음 만난 리액트 Components and Props Components 자바스크립트의 함수와 유사한 로직으로, 입력을 받으면 출력을 리턴한다. (그래서 함수 같다고 생각하면 편하다고 한다) 입력 : Props React Component 출력 : React element component는 class, react element는 instance와 유사하다. Props - Property (입력 속성) React Component의 속성 컴포넌트에 전달할 정보를 담고 있는 자바스크립트 객체 Props 특징 Read only 라서 값을 변경할 수 없다 ---> 새로운 값을 컴포넌트에 전달하여 새로운 element를 생성해준다. pure 한 함수 : 입력값을 변경하지 않고 같은 입력값에 대해 항상 같은 출력값을 리턴할 때 Impure 함수 : 입력값을 변경 모.. 2023. 3. 7. SOAPLE 처음 만난 리액트 - Rendering Elements 리액트의 Elements 리액트를 구성하는 가장 작은 블록들을 의미 DOM 요소의 가상 표현이 리액트 요소라는 것을 알 수 있다. 실제 DOM 요소는 리액트 요소보다 더 많은 정보를 가지고 있으므로 크다. 상대적으로 리액트 요소는 화면에서 보이는 것들을 기술하는 것이므로 작다. React의 요소는 자바스크립트 객체 형태로 존재(불변성)한다. 한번 생성된 요소는 children이나 속성을 변경할 수 없다. ReactDOM.render(리액트Element, HTMLElement) 즉 위 함수는 리액트 요소를 HTML 요소(DOM 요소)로 렌더링하는 것임 import React from 'react'; function Clock(props) { return ( 안녕 리액트 현재 시간 : {new Date()... 2023. 3. 6. SOAPLE 처음 만난 리액트 JSX JSX 란? JavaScript eXtension -> JS + XML/HTML const el = Hello, world!; 기본적인 React로 요소 만들기 React.createElement( type, // 요소나 리액틑 컴포넌트 [props], // 속성 [...children] // 요소가 포함하고 있는 자식 요소들 ) JSX 의 역할 // JSX를 사용하지 않은 코드 class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, { toWhat: `World.. 2023. 3. 5. SOAPLE 처음 만난 리액트 (1 ~ 5, 6 ~ 7, 8 ~ 9) SPA (Single Page Application) 모던 웹의 패러다임, 단일 페이지로 기존 서버 사이트 렌더링과 비교하여 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있다. 웹 앱에 필요한 모든 정적 리소스를 한번에 다운로드하여 페이지 간 이동 시 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있다. 전체 페이지가 아닌 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브앱과 유사한 UX를 제공할 수 있으므로 모바일 웹에 최적화 된 방식이기도 하다. 하지만 필요한 모든 정적 리소스를 최초에 1번만 다운로드하기 때문에 초기 구동속도가 느린 편이며 SEO(검색엔진 최적화) 문제가 존재한다. SPA은 서버 렌더링 방식이 아닌.. 2023. 3. 5. 이전 1 다음
