React 입문

React 는 왜쓰는가?

1. 앱만들기, 발행하기 쉽고 UX적으로 뛰어나서

2. 2020년 이후로 리액트 문법이 class 없이 쉬워져서

3. 자바스크립트 변수, if, for, array, object, function, 이벤트리스너, HTML, CSS 기초지식 필요합니다. 자바스크립트 기초지식 없으면 React를 이해하기 힘들다.

요즘 새로나오는 웹 사이트를 보면 페이지 이동을해도 그자리에서 부드럽게 이동을한다.

약간 모바일화면처럼 이런 것들을 확인하는 방법이 그 웹사이트를 들어가보는 것이다

대표적으로 메이저 SNS가 있다. 새로고침 없이 웹탐색이 가능하게 만들어 놓은것을 확인

할수있다. (인스타그램, 페이스북, 트위터 등등...) 이런한것을 Web-app이라고 부른다.

이렇게 불리는 이유 또한 앱 환경이랑 비슷하게 사용할수있어서 그렇다. 그리고

장점으로

1. 모바일앱으로 발행이 쉽다.

2. 앱 처럼 뛰어난 UX

3. 웹사이트보다 비지니스적으로 강점이 높다.(기본적으로 웹 개발자의 소양)

단점또한 있다.

1. 리엑트는 문법이 어렵다.

2. 지금까지 자바스크립트를 쓰다가 처음으로 React를 접하게 된다면 방법이 약간
   이상하다고 느낄수있다

그렇게 때문에 React를 써야한다는 것!

입문

Component

import React from 'react';
function App() {
	const handleClick = () => {
    	alert("클릭!")        
    };
  
       

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
    <span>이것은 내가 만든 APP 컴포넌트입니다.</span>
    <button onClick={handleClick}>클릭!</button>
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

Component 부모자식 관계

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

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

function Mother() {
  return <Child />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;