1. CRA(create-react-app)

---

React 프로젝트를 위한 boilerplate이다.

CRA로 리액트 프로젝트 생성하기

npx create-react-app my-app --template typescript

CRA의 package.json

• 기본적으로 dependency들이 숨겨져있다.
• eject scripts를 통해 webpack, babel 등 dependency들을 확인할 수 있다.
• start/build scripts 또한 eject 통해서 확인할 수 있다.
  • npm run start
    
    

2. React의 Element, Component

---

• React Element: render 하기 위한 정보를 담아둔 객체
• React Component: React Element를 return 하는 함수
• JSX: React.createElement를 호출하는 코드로 바뀔 예정 -> React Element

function App() {
  return (
    JSX 부분
    {JS 부분}
  );
}

Props

• Props란 Component라는 함수를 호출할 때 넘기는 인자이다.
• 리액트에서 Props는 항상 객체이다.
  
  

Welcome이라는 함수가 호출되면, h1 엘리먼트로 대치된다.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

🤔 return 내부(= JSX 내부)에서 중괄호({})는 자바스크립트 영역을 의미한다.

3. 실습

---

in Typescript

컴포넌트 생성

자료형이 스트링이 아닐 때는 {}를 이용해서 객체를 넘긴다.

function Div(props:any) {
  return (
    <div>
      div: {props.name1} <br />
      {props.children}
    </div>

  );
}
function Span(props:any) {
  return (
    <span>
      span: {props.name1} {props.name2}
    </span>
  );
}

function App() {
  return (
    <div className="App">
      <Div name1="name1">
        <Span name1="name1" name2="name2" />
      </Div>
    </div>
  );
}

위에서는 임시로 자료형을 any로 지정했지만, 다음처럼 정확하게 자료형을 지정할 수 있다.
이때, children의 자료형은 ReactNode이다.

import React, { ReactNode } from 'react';

function Div(props: { name1: string, children: ReactNode }) {
  return (...);
}
function Span(props: { name1: string, name2: string }) {
  return (...);
}
...

👉 실행 결과

파일 분리 (import, export)

Element, Component

<props.span1 />와 {props.span1()}는 같은 결과를 출력한다.

import './App.css';
// import Div from './Div';
// import Span from './Span';

const Div = (props: any) => {
  return (
    <div>
      <props.span1 />
      <br/>
      {props.span1()}
      <br />
      {props.name1}
      <br />
      {props.span2()}
    </div>
  );
}

const Span = () => {
  return (
    <span>span rendered!</span>
  );
}

function App() {
  return (
    <div className="App">
      <Div name1="name1" span1={Span} span2={Span} />
    </div>
  );
}

export default App;