[TIL] Day47 - 리액트 2 Todo 오늘 할 일

클래스형 컴포넌트, 함수형 컴포넌트

클래스 : 리액트 초기버전

함수형 : 리액트 16 이후 사용 권장 (이전에는 상태전달이 안되었었다.)

 

리액트에서 클래스형 사용할때 > `extends Component` 필수이다.

import { Component } from "react";

class ClassCom extends Component {
  render() {
    return <div>클래스형 컴포넌트</div>;
  }
}

export default ClassCom;

반드시 export 추출해야 한다.

 

클래스로 분리한 컴포넌트를 사용할 때 꼭 import 해주기

 

함수형

import React from "react";

const FuncCom = () => {
  return <div> 함수형 컴포넌트</div>;
};

export default FuncCom;

 

Todolist.tsx

`React.FC` : ts를 사용할때 리액트 컴포넌트 기반의 Function Component 기반의 함수를 선언한다는 뜻이다. props의 타입을 명시해주는 기능을 한다.

state

state : 데이터의 상태. 동적으로 감시해서 변경되면, 즉시 화면에 반영한다(재렌더링)는 훅. 상태관리 기법을 리액트에서 사용한다. 

//...
const [todos, setTodos] = useState<string[]>(["공부", "알바", "미팅"]);
//...
<ul>
          <li>{todos[0]}</li>
          <li>{todos[1]}</li>
          <li>{todos[2]}</li>
        </ul>

state 변경 시 별도의 변경 함수 `set~`

캡슐화와 연관된 개념!

 

구조 분해 할당

여러 데이터를 하나의 변수에 한번에 할당하는 방법

구조 분해 할당 - JavaScript | MDN

 

사용자 정의 타입 type

구조체, 공용체, 클래스 와 비슷한 역할

type Todo = {
  id: number;
  texy: string;
  isChecked: boolean;
};

interface와 유사하지만,

type는 기존의 타입으로 이용해 변수에 할당할때 사용한다.

interface는 새로운 객체 구조를 정의할 때 사용한다.

 

목록 <li> 반복 map()

내부 해당 엘리먼트에 key에 idx 로 각 데이터의 인식값을 넣는것을 추천한다.

<ul>
            {todos.map((val, idx) => (
              <li key={idx}>{val.text}</li>
            ))}
          </ul>

 

체크박스 boolean

const handleCheckedChange = (itemId: number) => {
    setTodos((prevItems) =>
      prevItems.map((val) =>
        val.id === itemId ? { ...val, isChecked: !val.isChecked } : val
      )
    );
  };
  //...
  <input
                  type="checkbox"
                  onChange={() => {
                    handleCheckedChange(val.id);
                  }}
                />

checkbo를 누르면, ischecked가 true 일경우 false로, false일경우 true로 변환된다.

 

목록 추가

button > Bootstrap

React Bootstrap | React Bootstrap

npm 설치 > index.html에 link stylesheet 삽입

 

변화한 문자열이 비어있는지 검사하는 `.trim()` 메소드

String.prototype.trim() - JavaScript | MDN

 

state가 arr, object 일 경우

현재 코드 확장 개선

• spread 문법 ...은 배열의 새로운 복사본을 만들고 부장해제라는 뜻.
• 이것을 이해하려면 참조형에 대해 이해해야 한다.
• 독립적인 메모리 공간이 생긴다

즉 현재 arr 의 위치 뒤에 새 데이터를 할당하려면, 스프레드로 복사해서 그 뒤에 붙여야 한다.

 

setInterval(콜백함수, 시간주기)

타이머

setInterval 함수 안에 시간 변화를 감지해서 1초마다 1씩 증가하도록 실행한다.

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState<number>(0);
  return (
    <div>
      <h2>타이머 : {seconds}초</h2>
      <button
        onClick={() => {
          setInterval(() => {
            setSeconds((prev) => prev + 1);
          }, 1000);
        }}
      >
        시작
      </button>
    </div>
  );
};

 

현재시간

toLocaleTimeString 으로 시간형식으로 가져온다. `오전 12:35:28`

setTime에서 변화하는 Date 객체를 지속적으로 호출한다.

const Clock: React.FC = () => {
  const [time, setTime] = useState(new Date());
  setInterval(() => {
    setTime(new Date());
  }, 1000);
  return <div>현재 시간 : {time.toLocaleTimeString()}</div>;
};

 

게시물 삭제

선택된 item의 id값을 제외한 val(el)의 데이터를 todos에 적용한다.

  const removeTodo = (id: number) => {
    setTodos(todos.filter((val) => val.id !== id));
  };
  //...
  <button className="delbtn" onClick={() => removeTodo(val.id)}>
                  삭제
                </button>

 

☑️ 배운 점

본격적으로 state 관리에 대한 강의를 들어서 좋았다.

본능적으로 state를 사용했었는데 > 왜, 어디에, 어떻게 사용하는지 깊고 다양하게 코드 짤 수 있었던 시간이었다.

 

setInterval , .trim 메소드, Bootstrap 의 활용법