아아.. 내가 react라는 것을 배웠었지.. 하지만 그 때의 나는 더이상 없...어지려고 해서,, 그렇다고 vue도 완벽해진 상태는 아니지만 ,,, 모든 사고회로가 vue로만 이어져 버린 지금,,,,,,,,다시 React를 톺아보자...🥲(화이팅)
👉 React
리액트란, javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 프레임워크이며, 대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있다.
React= 웹을 만드는 도구 (ex) 페북, 인스타, 트위터, 넷플릭스 ...)React-Native= 모바일 앱을 만드는 도구 (ex) 페북, 인스타, 트위터, 에어비앤비 ...)Electron= React로 만들어진 웹사이트를 한글, PPT와 같은 데스크톱 프로그램에서 실행되도록 하는 도구 (ex) 슬랙 ...)
Virtual DOM (Virtual Document Object Model)
-
Virtual DOM 이란, 가상 DOM을 말한다.
브라우저에 실제 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로 그냥 JS객체이기 떄문에 작동 성능이 실제 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다.
DOM : html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리함. -
리액트는
1) 상태가 업데이트 될 때마다 업데이트가 필요한 곳의 UI를 Virtual DOM 을 통해서 렌더링하고,
2) 다시 그릴 때마다 실제 브라우저에 보여지고 있는 DOM과 전후 상태를 비교,
3) 차이가 있는 곳을 감지하여
4) 변경이 필요한 최소한의 변경사항만 실제 DOM에 패치시켜줍니다.
이를 통하여, 앱의 효율성과 속도를 개선할 수 있다고 합니다.
react 설치
자 그러면 리액트를 시작해보자(두둥)
npx create-react-app myReact
( myReact라는 이름의 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성됨. )JSX
- Javascript를 확장한 문법
- React에서는 HTML 대신 JSX(React 전용 HTML)를 사용한다.
(최종적으로 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행됨.)
React-Hooks
React에서 함수형 컴포넌트(더 간단)에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 만든 도구,(=Hooks(훅))
ex)useState,useEffect
ex)import { useState, useEffect } from "react"
props (properties)
- 어떤 값을 보내줘야 할 때 사용.
props 사용법
--- < 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 값을 조회하고 싶다면
props.name으로 확인 할 수 있다.
props 여러개 보내기
--- < 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라고 앞에 붙여주지 않아도 인지함)defaultProps로 기본 props값 지정하기
- props 를 지정하지 않았을 때 기본 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됨.
--- < 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 하지 않았더라도 '이름 없음'이 출력됨.props의 기본값
- props를 넘겨줄 때 props 이름만 작성하고 값 설정을 생략 한다면,
값이true로 넘어간다.
ex) <myProject name="react" color="red" isReal>
= <myProject>로 name의 값은 react로,
color의 값은 red로,
isReal의 값은 true로 props됨.👉 Next.js
npx create-next-app 프로젝트명
(사실 Next를 설치하면 React는 같이 설치된다.)- React 라이브러리의 프레임워크이다.
- React는 Client Side Rendering(CSR)을 한다. = 서버에서 데이터를 가져올 때 로딩 시간이 길고, SEO(Search Engine Optimization)에 취약.
- SEO를 위한 Server-Side Rendering(SSR)을 가능하게 하기 위해서 사용. (리액로도 SSR가 되지만, 복잡 & 추가 세팅을 더 해야함
= Next.js를 사용하면 자동으로 pre-rendering을 지원 = 더 쉽게 구현 가능)
Front-end