JavaScript/React (15) 썸네일형 리스트형 JSX, Props 📌 JSX Javascript + XML JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림 객체를 변수로 빼 재사용성 가능 import React from 'react' export default function App() { const number = 1; const pTagStyle = { color: "red", } return( 안녕하세요 리액트입니다. {/* 주석을 사용하는 방법입니다. */} {/* 삼항 연산자를 사용해볼게요! */} { number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다.' } ) } 📌 Props 부모에서 자식으로 값을 내려줌(rendering) , 단방향 props는 반드시 읽기 전용으로 취급하며.. React Component React Component UI를 재사용이 가능한 개별적인 여러 조각으로 나눔 📌 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } 📌클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 📌 JSX 자바스크립트의 확장 문법이며 XML과 비슷 📌 { } 자바스크립트 표현식을 JSX 내부에 작성하려면 {}로.. Create React App Create React App boilerplate React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법 완제품을 구매한다. 📌 CRA 프로젝트 세팅 $ ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요. $ cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다. $ yarn create react-app week-1 #프로젝트 생성! 오류 발생... $ yarn create react-app week-2 yarn create v1.22.19 [1/4] Resolving packages... warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will no.. React 개발 환경 세팅 React 개발 환경 세팅 📌 크롬 브라우저 https://www.google.co.kr/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 📌 VScode https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Li.. React 소개 및 JavaScript 문법 React 소개 및 JavaScript 문법 📌 UI를 Building한다? Web 또는 App Application의 UI, 즉, 보여주는 부분(Front End)을 구축한다. 📌 React.js란? SPA 기반의 프론트엔드 개발 프레임워크 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법 비슷한 프레임 워크 : AngulaJS, VueJS 📌 SPA란? Single Page Application 한개의 페이지(index.html)로 이루어진 애플리케이션 컴포넌트(벽돌) 단위로 변경사항을 반영하기 때문에 깜빡임 없음 ↔ MPA(Multi Page Application) : 하나의 변경사항을 반영하기 위해 전체 페이지 re-rendering 하므로 깜빡임 현상(UX, 사용자 경험 ↓) 📌 React의 단.. 이전 1 2 다음
