리액트 X 타입스크립트 사용해보기.

타입 스크립트는 자바스크립트의 슈퍼셋이다.

 

타입 스크립트를 사용하면 개발자 입장에서 좋은 코드를 작성할 수 있게 된다.

(바보 같은 오류를 방지해준다.)

 

그래서 리액트에서 타입 스크립트를 사용해보자.

 

먼저 

디렉터리를 만들고

CRA를 해준다.

이렇게 해주면 자동으로 타입 스크립트가 설정된 리액트가 프로젝트가 만들어진다.

기본적으로 만들어진 프로젝트에 App과 index를 남기고 다 지워도 무방하다.

-

이렇게 파일 구조를 생성해주자.

그다음에 APP에서 styled-components를 이용해서,

import styled, { createGlobalStyle } from 'styled-components';

styled와 createGlobalStyle을 선언해주자.

 

 

이렇게 되면 GlobalStyle컴포넌트가 전역 스타일을 관리하게 되는 것이고 

RootDiv가 앞으로 만들 모든 컴포넌트들의 상위 스타 일드 컴포넌트가 될 것이다.

 

import React, { useState } from 'react';
import './TodoForm.scss';

interface TodoFormProps {}

const TodoForm = ({}: TodoFormProps) => {
  const [value, setValue] = useState('');
  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();
  };

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target;
    setValue(value);
  };

  return (
    <>
      <form onSubmit={onSubmit} className="todoForm">
        <input
          className="todoForm-input"
          value={value}
          onChange={onChange}
          placeholder="무엇을 하실건가요?"
        />
        <button className="todoForm-button">등록</button>
      </form>
    </>
  );
};

export default TodoForm;

 

TodoForm은 input & submit을 관리하는 컴포넌트이다.

아직 contextAPI를 연동하여하는 작업을 하지 않았기 때문에 아무런 기능을 하지 못한다.

import React from 'react';
import TodoItem from 'components/TodoItem';
import './TodoList.scss';

interface TodoListProps {}

const TodoList = ({}: TodoListProps) => {
  const todos = [
    {
      id: 1,
      text: 'contextAPI배우기',
      done: true,
    },
    {
      id: 2,
      text: 'TypeScript 배우기',
      done: true,
    },
    {
      id: 3,
      text: 'TypeScript 와 Context API 함께 사용하기',
      done: false,
    },
  ];
  return (
    <>
      <div className="todoList">
        {todos.length === 0 ? (
          <>오늘 할 일을 등록하세요!</>
        ) : (
          todos.map((todo) => <TodoItem todo={todo} />)
        )}
      </div>
    </>
  );
};

export default TodoList;

 

TodoList는 TodoItem을 랜더링 해주는 컴포넌트이다.

이 컴포넌트도 마찬가지로 contextAPI를 연동하지 않았기 때문에 아무런 기능도 하지 못한다.

 

import React from 'react';
import './TodoItem.scss';

interface TodoItemProps {
  todo: {
    id: number;
    text: string;
    done: boolean;
  };
}

const TodoItem = ({ todo }: TodoItemProps) => {
  return (
    <>
      <div className="todoItem">
        <div className="todoItem-index">{todo.id}</div>
        <div className={`todoItem-text ${todo.done ? 'done' : ''}`}>
          {todo.text}
        </div>
        <div className="todoItem-ItemBtn">
          <span>삭제</span>
        </div>
      </div>
    </>
  );
};

export default TodoItem;

 

TodoItem은 TodoList의 랜더링 되는 범위이다.

사실 done을 처리하는 className부분은 classnames라는 라이브러리를 사용하여 조건부 랜더링을 해주면 편하긴 한데

이 프로젝트는 간단하게 하는 거라 그냥 백 틱을 써서 처리하기로 했다.

 

 

이렇게 간단한 템플릿을 완성했다. 이제 할 작업은 contextAPI를 연동하는 것인데, 하나의 상태 관리를 하는 방법이다.

다음 포스팅에서는 contextAPI를 연동을 해볼 것이다.