아아.. 내가 react라는 것을 배웠었지.. 하지만 그 때의 나는 더이상 없...어지려고 해서,, 그렇다고 vue도 완벽해진 상태는 아니지만 ,,, 모든 사고회로가 vue로만 이어져 버린 지금,,,,,,,,다시 React를 톺아보자...🥲(화이팅)
리액트란, javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 프레임워크이며, 대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있다.
React
= 웹을 만드는 도구 (ex) 페북, 인스타, 트위터, 넷플릭스 ...)React-Native
= 모바일 앱을 만드는 도구 (ex) 페북, 인스타, 트위터, 에어비앤비 ...)Electron
= React로 만들어진 웹사이트를 한글, PPT와 같은 데스크톱 프로그램에서 실행되도록 하는 도구 (ex) 슬랙 ...)Virtual DOM 이란, 가상 DOM을 말한다.
브라우저에 실제 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로 그냥 JS객체이기 떄문에 작동 성능이 실제 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다.
DOM : html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리함.
리액트는
1) 상태가 업데이트 될 때마다 업데이트가 필요한 곳의 UI를 Virtual DOM 을 통해서 렌더링하고,
2) 다시 그릴 때마다 실제 브라우저에 보여지고 있는 DOM과 전후 상태를 비교,
3) 차이가 있는 곳을 감지하여
4) 변경이 필요한 최소한의 변경사항만 실제 DOM에 패치시켜줍니다.
이를 통하여, 앱의 효율성과 속도를 개선할 수 있다고 합니다.
자 그러면 리액트를 시작해보자(두둥)
npx create-react-app myReact
( myReact라는 이름의 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성됨. )
React
에서 함수형 컴포넌트(더 간단)에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 만든 도구,(=Hooks(훅))useState
, useEffect
import { useState, useEffect } from "react"
--- < App.js > - 부모 컴포넌트 ( props를 보내는 컴포넌트 ) ---
import React from 'react';
import MyProject from './MyProject';
function App() {
return (
<MyProject name="pye" />
);
}
export default App;
--- < MyProject.js > - 자식 컴포넌트 ( props를 받는 컴포넌트 ) ---
import React from 'react';
function MyProject(props) { 👈 props를 파라미터로 조회
return <div>안녕하세요 {props.name}</div>
}
export default Hello;
props.name
으로 확인 할 수 있다.--- < App.js > - 부모 컴포넌트 ---
...
<MyProject name="react" color="red"/>
- name에 react를 , color에 red를 담아 내려보냄.
...
--- < MyProject.js > - 자식 컴포넌트 ---
...
function MyProject(props) {
return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
} - style에 props값을 담아주어서 props.color값인 red가 적용됨.
...
function MyProject({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
} - 파라미터에서 구조분해할당을 하였다.(=props라고 앞에 붙여주지 않아도 인지함)
--- < App.js > - 부모 컴포넌트 ---
...
<MyProject name="react" color="red"/>
<MyProject color="pink"/>
...
--- < MyProject.js > - 자식 컴포넌트 ---
...
function MyProject({ color, name }) {
return (
<div style={{ color }}>안녕하세요 {name}</div>
)
}
MyProject.defaultProps = {
name: '이름없음'
}
...
- <App.js>에서 두 번째 <MyProject/>컴포넌트에는 name을 지정해주지 않음.
- <MyProject/>컴포넌트에서 name의 defaultProps값으로 '이름없음'을 지정해주었기 때문에,
<App.js>에서 두 번째<MyProject>에 name을 props 하지 않았더라도 '이름 없음'이 출력됨.
true
로 넘어간다.ex) <myProject name="react" color="red" isReal>
= <myProject>로 name의 값은 react로,
color의 값은 red로,
isReal의 값은 true로 props됨.
npx create-next-app 프로젝트명
(사실 Next를 설치하면 React는 같이 설치된다.)