리액트

: 유저 인터페이스(UI)를 빌딩하기 위한 자바스크립트 라이브러리이다.
(사용자가 보여지는 부분을 만드는 프론트엔드 라이브러리이다.)
SPA기반의 프론트엔드 개발 프레임 워크 중 하나이다.
컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.
UI 빌딩?
:웹 또는 앱 어플리케이션의 보여지는 부분(프론트엔드 영역)을 구축한다는 뜻

SPA

:한개의 페이지로 이루어진 어플리케이션이라는 뜻이다. <=>MPA
(MPA : 좋아요 한 번 눌렀는데 웹사이트가 다시 로딩된다? => 불편)

• 딱 한개의 페이지로 구성된 웹 앱이다. (index.html)
• 서버에 1회 리소스를 요청한다.
• 그 이후 필요할 때 데이터만 받아와서 기존 페이지를 '수정'하는 방식으로 화면을 수정한다.
• 사용자 입장에서는 페이지가 다시 로딩되는 현상이 없어 자연스럽다.

컴포넌트

:리액트가 채택한 개발 방법
[컴포넌트 = 벽돌] 벽돌을 쌓아 올리듯이 개발한다.(헤더,바디,푸터)
SPA기반 : 컴포넌트 단위로 변경사항을 반영하기 때문에 렌더링이 없다.
MPA기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 리로드

런타임

:프로그래밍 언어가 구동되는 환경, 시간을 말한다.
즉, 자바스크립트가 구동되는 환경!(2가지)

• 브라우저
• node환경

CRA

:Create React App
한 줄의 명령어 입력으로 react 프로젝트 개발에 필요한 필수 요소를 자동으로 구성하는 방법
보일러플레이트
:리액트 프로젝트를 구성하기 위해 필요한 것들이 많은데, 이러한 것들을 신경쓰지 않아도 알아서 착착 되는 것!

CRA를 쓴다는 것은 완제품을 산다는 것과 같다.
CRA를 안 쓴다는 것은 하나하나 재료와 도구를 사서 조립하는 것과 같다.

컴포넌트

:컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각들을 개별적으로 살펴볼 수 있다.
props라는 input을 받아 react엘리먼트를 output한다.
1.함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

//               ▼input
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// ▲output

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

2.클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

부모자식 컴포넌트
부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
자식 컴포넌트 : 다른 컴포넌트 안에 품어지는 컴포넌트

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
  //▲자식 컴포넌트
}

//부모 컴포넌트 ▼
function App() {
  return <Child />;
  //       ▲자식 컴포넌트
}

원래 코드
function App() {
 return <div>나는 자식입니다.</div>
}

export default App;

이런식으로 합쳐서 쓸 수 있지만, 코드가 길어지거나 반복되는 로직이 생길 경우 따로 컴포넌트를 분리해서 사용한다.

function App() {
  return (
    <>
      <div>나는 자식입니다.</div>
      <div>나는 자식입니다.</div>
      <div>나는 자식입니다.</div>
    </>
  )
}

컴포넌트화
function Child(){
  return <div>나는 자식입니다.</div>
}

function App() {
  return (
    <>
      <Child/>
      <Child/>
      <Child/>
    </>
  )
}

기본코드

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;