React Study - 2. 리액트 시작하기

연습문제를 작성해보기에 앞서 프로젝트 세팅을 해보려고 한다.

 

번들러는 Vite를 사용하였고, Vite + Typescript + SWC 를 사용하여 프로젝트를 생성하였다.

아래 명령어를 입력하여 간단하게 Vite 프로젝트를 시작할 수 있다.

 

https://vitejs-kr.github.io/guide/

Vite

 

SWC는 Speedy Web Compiler의 약자로, Rust로 만든 자바스크립트 컴파일러 & 번들링 툴이다. 

찾아보니 주로 Next.js와 호환하여 많이 사용하는 듯하다.

(참고 글 : https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/ )

 

아무튼 이제 프로젝트를 실행해보자.

$ npm create vite@latest

해당 명령어 입력시 프로젝트 이름을 설정하고 프레임워크를 선택할 수 있다.

 

2.1 JSX 문법

JSX는 자바스크립트의 확장 문법이다. 브라우저에서 실행되기 전에 번들링과정에서 바벨을 사용해서 일반 자바스크립트 코드로 변환된다

JSX는 자바스크립트 문법이 아니기 때문에 바벨 플러그인을 이용해서 자바스크립트로 변환하는 과정이 필요하지만, 리액트 컴포넌트를 작성하기에 용이하기 때문에 리액트에서 정한 규칙을 따른다.

 

[장점]

(1) 보기 쉽고 익숙하다.

다음은 JSX 문법으로 작성된 코드가 어떻게 자바스크립트로 변환되는지 보여주는 예시이다.

//JSX 문법
import * as React from "react";

const MyComponent: React.FunctionComponent = (props) => {
  return <div>Hello React!</div>;
};

export default MyComponent;

//자바스크립트로 변환
function MyComponent(){
  return React.createElement("div", null, "Hello React!")
}

(2) 활용도가 높다.

 

3. Props

Props는 Properties의 약자로 리액트의 코어 컨셉 중 하나이다. 컴포넌트의 속성을 설정할 때 사용하는 요소로 부모 컴포넌트에서 속성을 상속받아 사용하는 요소이다.

 

3.1 JSX 내부에서 props 렌더링

props는 함수형 컴포넌트의 파라미터로 받아와서 사용할 수 있다.

 

부모 컴포넌트

import { useState } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <div className="App">
      <MyComponent name="rachel" />
    </div>
  );
};

export default App;

자식 컴포넌트 - name 속성을 부모 컴포넌트에서 props로 넘겨받는다.

import * as React from "react";

const MyComponent = (props: { name: string }) => {
  return <div>Hello {props.name}</div>;
};

export default MyComponent;

 

3.2  defaultProps 설정

파라미터로 넘겨받는 props가 없을 때 기본으로 props를 보여주고 싶다면 defaultProps를 이용하면 된다.

MyComponent.defaultProps = {
  name: "unknown",
};

 

3.3  props.children

태그와 태그 사이에 내용을 보여주는 자식 요소이다.

import { useState } from "react";
import "./App.css";
import MyComponent from "./MyComponent";

const App = () => {
  return (
    <div className="App">
      <MyComponent name="Rachel!">리액트를 공부해봅시다</MyComponent>
    </div>
  );
};

export default App;

<MyComponent>태그 사이에 들어간 문구가 자식 컴포넌트(여기선 MyComponent)에서 children 으로 받아진다.

import * as React from "react";

const MyComponent = (props: { name: string; children: React.ReactNode }) => {
  return (
    <div>
      <h2>Hello {props.name}</h2>
      <p>{props.children}</p>
    </div>
  );
};

export default MyComponent;

MyComponent.defaultProps = {
  name: "Unknown",
};

로컬 빌드시 나오는 화면

3.4 비구조화 할당

ES6 에서 지원하는 비구조화 할당 문법을 통해 여러 props를 좀 더 간단하게 선언하고 사용할 수 있다.

구조 분해 할당/문법이라고도 칭하며 함수의 파라미터가 객체일 경우에도 사용할 수 있다.

 

(1) 구조 분해 할당을 사용하는 경우

import * as React from "react";

type Props = {
  name?: string;
  children: React.ReactNode;
};

const MyComponent = (props: Props) => {
  const { name, children } = props;
  return (
    <div>
      <h2>Hello {name}</h2>
      <p>{children}</p>
    </div>
  );
};

export default MyComponent;

(2) 함수 파라미터에서 바로 비구조화한 경우

const MyComponent = ({name, children}: Props) => {
  return (
    <div>
      <h2>Hello {name}</h2>
      <p>{children}</p>
    </div>
  );
};

export default MyComponent;

 

3.5 propsTypes로 props 검증

props의 타입을 지정할 때 사용하는 문법으로, 코드 상단에 prop-types 라이브러리를 불러와서 사용해야 한다.

위에 예시에서 사용한 type 설정은 타입스크립트의 문법으로 compile시 타입 체크를 하며, propsTypes의 타입 검증은 런타임시에 타입 체크를 하는 용도이므로 서로 별개의 기능임을 숙지해두자.

 

찾아보니 같이 사용하는 일은 거의 없을 것 같다. 사용하는 방법만 숙지해두자

https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application

PropTypes in a TypeScript React Application

 

* isRequired 속성 : props를 지정하지 않으면 에러 메세지를 노출시켜준다.

 

> 사용방법

import PropTypes from "prop-types";

(중략)
.
.
.
MyComponent.propTypes = {
  name: PropTypes.string
  children: PropTypes.node.isRequired
};

 

> 다양한 PropTypes 종류

array: 배열

arrayOf(타입명): 특정 PropType 으로 이루어진 배열 (ex. arrayOf(PropTypes.number) : 숫자로 이루어진 배열)

bool: true / false

func: 함수

number: 숫자

object: 객체

string: 문자열

symbol: ES6 이상의 Symbol

node: 렌더링 할 수 있는 모든 것 (JSX 포함. children도 node의 PropType 이다.)

instanceOf(클래스명): 특정 클래스의 인스턴스

oneOf([배열]): 주어진 배열 중 하나의 요소

oneOfType([React.PropTypes.타입명1, React.PropTypes.타입명2]): 주어진 배열 종류 중 하나

objectof(React.PropTypes.타입명): 객체의 모든 키 값이 인자로 주어진 PropType 객체

shppe({name: PropTypes.string, age: PropTypes.number}): 주어진 스키마를 가진 객체

any: 아무거나

 

 

 

ㅡ 본 글은 리액트를 다루는 기술 도서와 리액트 공식 문서를 참고하여 작성한 글입니다. ㅡ