React (13) 썸네일형 리스트형 React Practice - 함수형 Component 사용하여 생성한 신호등 클래스형 Component로 변경해보기 https://kalswn.tistory.com/17 React Practice - 함수형 Component 사용하여 _ 신호등 만들기 신호등 모양을 출력하는 컴포넌트 작성하기 - App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트를 포함 - TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포 kalswn.tistory.com 함수형 컴포넌트로 생생했던 신호등을 클래스형 컴포넌트로 변경해보기! TraffiLight.js import {Component} from 'react'; import Lamp from './Lamp' class TrafficLight extends Component { render(){ const {size.. React Practice - 함수형 Component 사용하여 _ 신호등 만들기 신호등 모양을 출력하는 컴포넌트 작성하기 - App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트를 포함 - TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포넌트 3개를 포함 - Lamp 컴포넌트는 색상과 크기를 부모 컴포넌트로부터 전달받아서 해당 색상과 크기의 원을 출력 - 100px의 붉은색 동그라미를 출력 => 1) App.js 에 신호등 만들기 function App() { return ( ); } export default App; 2) TrafficLight.js 생성하여 App.js 에서 사이즈 전달하기 App.js import TrafficLight from './trafficLight/TrafficLight'; f.. React - 클래스형 컴포넌트 / 함수형 컴포넌트 / Props 클래스형 컴포넌트 MyComponentClass.js import { Component } from "react"; class MyComponentClass extends Component { render() { return ( 이름은 홍길동입니다. 나이는 23살입니다. ); } } export default MyComponentClass; App.js import MyComponentClass from './MyComponentClass'; function App() { return ( ); } export default App; 함수형 컴포넌트 MyComponentFunction.js function MyComponentFunction(){ return( 이름은 홍길동입니다. 나이는 26살입니다. ).. JSX - 역할 / 장점 / 사용법 JSX : JavaScript + Xml : A Syntax eXtension to JavaScript 자바스크립트 확장 문법 태그에 특화된 속성 스타일과 관련된 속성 이벤트 핸들러 ~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~ | 속성 ( attribute) => 태그를 처리하는 데 필요한 부가적인 정보 | +ㅡ 태그(tag) => 시작 태그와 종료 태그로 구성 => 종료 태그가 생략되거나 자기 종료되는 경우가 있음 ~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~ ... ~~ 내용(context) 요소(element) = 태그 + 속성 + 컨텍스트 HTML => XML ~~~~~~~~~~.. React - 의미 / 장점 / 단점 / 실행 React? : A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 모음집 ** 프레임워크 vs 라이브러리 프레임워크(Framework) 라이브러리(Library) 사용 앵귤러JS 뷰JS React 프로그램 흐름 제어 권한 흐름 제어 권한을 개발자가 아닌 프레임워크 갖음 흐름을 제어하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 ** SPA : Single Page Application 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션 장점 빠른 업데이트와 렌더링 속도 : 업데이트란 웹사이틀 탐색할 때 화면에 나타나.. 이전 1 2 다음
