React #1

• React
  • 오직(View)만 신경쓰는 라이브러리이다.
  • Virtual DOM
    • 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML으로 작성 합니다
    • Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 마치 실제 DOM의 가벼운 사본 느낌
    1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링 합니다
    2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
    3. 바뀐 부분만 실제 DOM에 적용합니다
    • 기타 특징
      • 리액트는 오직 VIew만 담당합니다. 라이브러리 입니다.
• 번들러(bundler)
  • 여러개의 자바스크립트를 하나로 묶어주는 것이고 도구로는 Webpack이 대표적이다
  • css-loader
    • css파일을 불러온다
  • file-loader
    • 웹 폰트나 미디어 파일을 불러온다
• JSX란?
  • 자바스크립트의 확장 문법이고, XML과 비슷하게 생겼다.
  • 작성된 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바크스립트 형태의 코드로 변환(바벨 : 구형 브라우저 에서 사용할 수 있게 하위 호환성을 위해 사용하는 도구)
  • 장점
    • jsx에서 div나 span같은 HTMl태그를 사용할 수 있을 뿐만 아니라 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있습니다.
    • App컴포넌트를 HTML태그 쓰듯이 작성합니다.
  • 문법
    • Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부에 하나의 DOM트리구조로 이루어져야 한다는 규칙이 있다
    • <Fragment> 안에 있거나 <div>내에 여러구조는 상관 없지만 여러구조의 div가 있으면 안된다

    import {Fragment} from "react";
    
    fuction App(){
    	return (
    		<Fragment>
    			<h1>리액트 안녕</h1>
    			<h2>React</h2>
    		</Fragment>
    	);
    }
    

  • 자바스크립트 표현
  • function App() { const name = "리액트"; return ( <div> {name} <input /> </div> ); }
  • if문 대신 조건부 연산
    • &&를 사용한 조건부 렌더링
    • function App() { const name="리액트"; return( <div> {name ==="리액트" && <h1>리액트입니다</h1>} </div> ); } export default App;
  • function App() { const name="리액트"; return( <div> {name ==="리액트" ? (<h1>리액트입니다</h1>) : (<h2>리액트아닙니다</h2>)} </div> ); } export default App;
  • 인라인 스타일
    • 인라인 스타일은 기존에 있던 ‘background-Color’이 사라지고 backgroundColor 카멜 표기법으로 작성됩니다.
    • css을 import 하는 경우에는 기존에 사용하던 ‘background-Color’표기법을 그대로 작성하면 됩니다.
  • 스타일
    • class대신 className을 사용
    • .css파일이 있을 경우

    import './App.css';
    function App(){
    	const name="리액트";
    	return <div className="react">{name}</div>;
    }
    
    ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
    App.css파일
    .react{
      background-Color : black;
      color : aqua;
      font-Size : 48px;
      font-Weight : bold;
      padding : 16px
    };
    

  • 꼭 닫아야하는 태그
    1. input (<input></input>, <input/>
• 컴포넌트
  1. TodoTemplate
  2. TodoInput
  3. TodoList
  4. TodoItem
• 컴포넌트의 속성값을 지닌 props 와 상태값을 지닌 state가 있다.
• 클래스형 컴포넌트
• import {Component} from "react"; class App extends Component{ render(){ const name = "react"; return <div className="react">{name}</div>; } } export default App;
• ES6 문법
  • ES6이전 문법에는 class대신 prototype을 사용해서 작성 하였다. 현재도 쓸 수는 있지만 class를 사용해서 작성한다
• Arrow Function
  • Arrow Function은 this를 사용하지 못하기 때문에 event를 할때는 익명함수를 쓰는 형태로 작성하는것이 좋다
• props(properties)