리액트란 무엇인가?

리액트는 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 가질 수 있다.
리액트는 SPA(싱글페이지어플리케이션)으로 서버에서 HTML 페이지를 일일이 다운로드 하는 것이 아니라 하나의 마크업 HTML 파일을 받아서 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시한다.
즉 페이지를 이동 할 때마다 깜빡임이 없다.

Dom 이란?
HTMl을 자바스크립트로 조작이 가능한 객체 형태로 모델링 한 것을 Document Object Model 이라고 한다.
Dom은 웹페이지를 자바스크립트와 같은 프로그래밍 언어와 연결을 해줘서 화면에 그려진 UI요소들을 조작 할 수 있게 도와준다.

• yarn 설치 명령어
  npm install -g yarn
• yarn 버전 확인
  yarn -v
• yarn create app 명령어
  yarn create react-app title

본격적으로 실습을 해보도록 하자

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

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {" "}
      여기에는 HTML 코드를 작성하면 된다.
      {/* 이곳에   html 코드를 작성해 주세요 */}
    </div>
  );
}

• Component 맨 앞글자는 무조건 대문자

• 폴더는 무조건 소문자로

이제 Component를 배워보도록 하자

import React from "react";

const Child = () => {
  return <div>연결 성공</div>;
};

const Mother = () => {
  return (
    <div>
      <Child />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Mother />
    </div>
  );
};

export default App;

이렇게 부모 component에서 자식 component로 계속 내려갈 수 있다.
결국 마지막에는 연결 성공이라는 코드가 나온다.

JSX(자바크스립트)는?

JSX는 얼핏보면 HTML처럼 생겼지만, Babel 이라는 라이브러리가 자바스크립트로 변환을 해준다.

JSX에서 변수를 쓰려면?

import React from "react";

const App = () => {
  const cat_name = "perl";
  return <div>Hello {cat_name}</div>;
};

export default App;
// 이렇게 eturn 위에서 js문법을 쓰고
// return 밑에서 가져올 때는 {변수}를 이용하면 된다.

3항연산자 사용도 가능하다.

import React from "react";

const App = () => {
  const number = 1;
  return (
    <div>
      <p>안녕하세요. 리액트 반입니다.</p>
      <p>
        {number > 10 ? number + "는 10보다 크다" : number + "은 10보다 작다"}
      </p>
    </div>
  );
};

export default App;

props를 이용해보자

function Mother() {
  const name = "홍부인";  // 변수 name을 하위 컴포넌트인 Child에서 사용을 해보자. 
  return <Child motherName={name} />;  // 우선 여기에 motherName={name}을 적어서 연결을 시켜보자
}

function Child(props) { // 다음 여기 props를 입력을 해보자
  console.log(props);
  return <div>{props.motherName}</div>; // 여기서 랜더링을 
  // 하려면 {props.motherName}을 입력해주면 홍부인이 나온다.
}

이제 여기서 맨 위 컴포넌트인 APP에서 맨 밑 컴포넌트인 child까지 props를 통해 내려보도록 하자
import React from "react";

const App = () => {
  const name = "Frank";
  return (
    <div>
      <GrandFather name={name} />
    </div>
  );
};

const GrandFather = (props) => {
  console.log(props.name);
  return (
    <div>
      <Mother name1={props.name} />
    </div>
  );
};

const Mother = (props) => {
  return (
    <div>
      <Child name2={props.name1} />
    </div>
  );
};

const Child = (props) => {
  return <div>{props.name2}</div>;
};

export default App;