React입문 Component / JSX(JavaScript + XML)

1. React Component

(1) React Component란?

• 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음.
• 개념적으로 JavaScript함수와 유사.
• "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환.
• 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 함수형 컴포넌트 사용을 권장함! (훨씬 쉽다)

<함수형 컴포넌트>

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

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

// 쉽게.
function App () {
	return <div>hello</div>
}

React 세계에서 말하는 컴포넌트(블럭)는 함수다!!

(2) 만든 CRA프로젝트 살펴보기

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

컴포넌트 안에는 자바스크립트를 쓸 수 있는 부분이 있음.
return을 기준으로 아랫부분에서는 JSX를 작성할 수 있음.(여기세 작성한 것이 화면에 보여짐.)

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자!
폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로!

(3) 부모-자식 컴포넌트

• 컴포넌트는 다른 컴포넌트를 품을 수 있음. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 커포넌트를 자식 컴포넌트라고 부름.

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

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

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

export default App;

2. JSX(JavaScript + XML)

(1). JSX란?

• JavaScript를 확장한 문법 (JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법)
  element: 단순히 화면에 그려지는 HTML적 요소

// import [패키지명] from [경로] 이 형식으로 불러옴.
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

React에서는 딱 하나의 html 파일만 존재함.
JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그림.

• HTML을 품은 JS => JSX!
  자바스크립트 안에서 html 태그같은 마크업을 넣어 작업을 편하게!

(2). JSX 실습해보기

• 태그는 꼭 닫아주기!
• 무조건 1개의 엘리먼트를 반환하기
• JSX에서 javascript값을 가져올때는 중괄호를 쓴다!
• 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용.
• class 대신 className!
• 인라인으로 style주기