React - 기본예제) 시계 만들기

프로젝트 구조 1. Clock.jsx import React from "react"; function Clock(props){ return( 안녕, 리액트! 현재 시간 : {new Date().toLocaleTimeString()} ); } export default Clock; 2. neonStyle.css .neonText{ color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; text-align: center; } #clock-header{ margin-top: 10%; } 3. index.c..

• format_list_bulleted React
• · 2022. 8. 29.
• textsms

React Elements 의 특징

1. immutable (불변성 ) 즉 Elements가 불변성의 특징을 가진다는 것은 Elements 생성후에는 chiledren이나 attributes를 바꿀 수 없다는 것을 의미한다. 붕어빵틀에 붕어빵속에 슈크림이 들어가던 팥이 들어가던 틀어 구워져서 만들어지기 전에는 다양한 붕어빵이 될 수 있지만 한번 슈크림이 들어가서 구워지면 그 속을 다시 팥으로 바꿀 수 없는 것과 마찬가지이다. 2. Root DOM Node 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다. 반면에 기존에 있던 웹사이트에 추가적으로 React를 연동하게되면 여러개의 분리된 수많은 Root DOM node를 가지게 될 수 도 있다. Root dvi에 실제로 React Elements를 랜더링 하기 위해서는 다..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

React - Rendering Elements와 React.createElements() 함수에 대해서

React Elements React의 official document를 참고하면 다음과 같은 내용을 볼 수 있다. Elements are the samllest building blocks of React apps. 즉 리액트 앱을 구성하는 가장 작은 블록을 Elements라고 한다. 아래의 사진과 같이 우리가 크롬에서 개발자 도구로 Elements 탭에서 보는 것들은 DOM Elements이다. 그렇다면 React Elements란 무엇일까? 너무나 심플하게도 Virtual DOM에 있는 Elements 를 React Elements라고 한다. 결국 React Elements는 DOM Elements의 가상표현이라고 볼 수 있다. 다만 DOM Elements는 React Elements에 비해서 많은..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

JSX의 개념과 장점

JSX(JavaScriptXML)란? A syntax extension to javaScript : 자바스크립트의 확장 문법 이라는 뜻으로 JavaScript에 XML을 추가하여 확장한 문법이다. 다음의 기초적인 JSX 코드 예시를 보자 const element = Hello, world! 뭔가 자바스크립트 코드같은데 대입연산자 옆에를 보면 HTML코드가 들어가 있다. 이와 같이 Javascript와 HTML코드를 일정한 문법규칙을 가지고 혼용해서 사용할 수 있는 문법이 JSX 문법이다. JSX는 이랙트로 프로젝트를 개발할 댸 사용되므로 공식적인 자바스크립트 문법은 아니다. 또한 브라우저에서 실행하기 전에 바벨이라는 것을 사용하여 일반 자바스크립트 형태의 코드로 변환되기 때문에 우리가 JSX코드로 작성한..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

SPA(SinglePageApplication) 와 React에 대해서

SPA 규모가 큰 웹사이트의 경우 수백개의 웹페이지가 존재하는데 이것을 각 페이지마다 HTML로 만드는 것은 상당히 비효율적이고 관리하기 힘들다. 그래서 하나의 HTML에다가 사용자가 특정 페이지를 호출할 때 그 HTML에다가 내용을 채워서 보내주는 것이 SPA이다. 이러한 SinglePageApplication을 만드는데 가장 많이 쓰이는 javascript 라이브러리 중 하나가 바로 React이다. React의 장점 1. 빠른 업데이트와 렌더링 속도 React에서는 빠른 업데이트를 위해서 Virtual DOM이라는 것을 사용하는데 말 그대로 가상의 DOM인데 React JS는 메모리에 Virtural DOM를 보관하고 유저가 보고 있는 Real DOM 동기화한다. 기존의 방식은 DOM을 직접 수정하는..

• format_list_bulleted React
• · 2022. 8. 27.
• textsms