참고사이트 www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com App.js추가
dev/react
참고사이트 www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com props 차이점 props 읽기만 가능 props 수정할 수 없다 / state는 수정시 setState()만 사용가능 props, state는 rander라고 하는 함수호출을 유발하기때문에 ui가 바꿔져야 하는 작업에 대해서 props, state를 적당히 잘 수정해주는 걸 통해서 ui를 바꿀수 있다. state(구현자)는 내부에서 사용한다. props(사용자)는 외부에서 사용한다. 윗쪽 동그라미가 아랫 동그라미에 상위 컴포넌트다. 상위 -> 하위 (props을 통해 전달 ) 하위 -> 상위 (이벤트를 통해 ) 리덕스(..
참고사이트 www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 2020/05/05 - [react/기초] - react 구조 2020/05/11 - [react/기초] - react 컴포넌트(component) 개념 2020/05/13 - [react/기초] - react 속성(props), react Developer Tools 사용 2020/05/15 - [react/기초] - react state소개 및 사용 2020/05/17 - [react/기초] - react 이벤트 - 사용자 정의함수 생성 imp..
참고사이트 www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 2020/05/05 - [react/기초] - react 구조 2020/05/11 - [react/기초] - react 컴포넌트(component) 개념 2020/05/13 - [react/기초] - react 속성(props), react Developer Tools 사용 2020/05/15 - [react/기초] - react state소개 및 사용 - mode에 따라서 title(HTML영역)과 desc(HTML is for informati..
참고사이트 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 2020/05/05 - [react/기초] - react 구조 2020/05/11 - [react/기초] - react 컴포넌트(component) 개념 2020/05/13 - [react/기초] - react 속성(props), react Developer Tools 사용 - state소개 state를 이해하기 위해선 props와 함께 개념을 이해해야 한다. 휴대폰에 버튼, 화면 등(user interface)이 props라면 내부..
참고사이트 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 2020/05/05 - [react/기초] - react 구조 2020/05/11 - [react/기초] - react 컴포넌트(component) 개념 - react 속성(props) 사용 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Subject extends Component { render(){ ..
참고사이트 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 2020/05/05 - [react/기초] - react 구조 - 순수 html 코드 위치 public > pure.html WEB world wide web! html css javaScript Html Html is HyperText Markup Language. 위 같은 순수html 코드는 한눈에 이해하기 쉽다. 하지만 소스가 1000만줄 정도라면 어떨까? - react Component 생성코드 ( 순수 html 코드를 리액트..
참고사이트 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 2020/05/04 - [react/기초] - react 설치, 개발환경구축 - public index.html id root가 중요 - src index.js ( App.js와 root id를 render해줌 ) import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //.js 생략 import * as serviceWorker from './serviceWorker'; ..
참고사이트 https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 리액트의 정의?? 복잡한 웹 환경에서 좀더 효율적이고 가독성 높고, 재사용성등 여러 필요성 때문에 페이스북에 의해서 개발되어졌다. 리액트가 왜 좋은가? index.html 위의 top, sidebar 의 영역을 top.html, sidebar.html 생성 해놓고(component) 호출해서 사용할 수 있도록 함 또한, 서브페이지에서 top에 영역을 사용할 수 있어서 코드에 재사용성이 좋다. top 영역이 변경내용이 있을때 top.html만 수정하면 되므로 유지보수에도 도움이 된다. 윈도우 환경 설치 1. n..
