React + TIL

Dev_Sumni·2022년 5월 24일

React TIL

CRA로 react 프로젝트 생성하기

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

CRA의 package.json 살펴보기

기본적인 dependency들이 숨겨져 있음
eject script를 통해 webpack, babel등 확인 가능
config는 webpack을 사용한다.
webpack dev 서버 이용해서 CRA가 내부적으로 우리가 소스 코드를 수정할 수 있게 도와준다.
localhost: IP (인터넷 네트워크상에서 가지고 있는 하나의 주소)
서버의 주소로 접속을해서 webpack dev 서버로부터 html을 받아오는것

React Element와 Component

React Element
render하기 위한 정보를 담아둔 객체
React Component
React Element를 return 하는 함수

React Component에서의 props

<> jsx안에서 {} js 문법을 실행
Props
Component라는 함수를 호출할 때 넘기는 인자
React에서 Props는 항상 객체
컴포넌트 합성에 대하여

div, span으로 name 출력하기

import React from 'react';
import './App.css';

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" /> 자동으로 props.children안에 들어가도록 지정
      </Div>
    </div>
  );
}

export default App;

typescript 제너릭에 대하여

import React, { ReactNode } from 'react';

const Div= ({ children, name1 }: { name1: string, children?: ReactNode }) => { 
~
}

ReactNode의 종류
ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined

파일 분리하기

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

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

한 파일에선 export default를 하나만 받아올 수 있다.
여러개를 받아오고 싶을때에는

export default안에 객체를 이용해서 여러개를 묶어 보내거나
export const를 이용해서 import하거나

ex)
1. 예시 export default + obj;

import obj from './b';

const b = 1;
const c = 1;

export default {
  b,
  c,
};

예시 export const 두 개

import { b, c } from './b';

export const b = 1;
export const c = 1;

화면에 출력하기

어떤 type을 사용할지 모르겠을때는 type error를 내보기

<div> 
1번째 방법 jsx문법
  <props.span1 />
  <br />
  
2번째 방법 js
  {props.span1()}
  <br />
</div> 

const Span = () => {
return (
<span>span renedred! </span>

scope 개념

import aFunc from './b';

aFunc();

aFunc.num; → 접근 불가능 (=scope)
aFunc.b;     이렇게 기재했을때 num, b와 같이 다른 파일에서 접근할 수 없다.

function a () {
  let num;
  function b () {
    num = 5;
  }
  b ();
  return num;
}

export default a;