프로그래머스 데브코스 54일차 with. TS 웹 풀스택

📚요약

지난 시간에는 리액트의 기본을 배웠습니다. 이번 시간에는 리액트에서 중요한 컴포넌트에 대해 배우고 state를 활용해 화면의 데이터를 변경해 보겠습니다.

 

📖리액트

📄컴포넌트

컴포넌트란 리액트가 HTML, CSS 그리고 JS를 묶어 만든 재사용 가능한 UI 요소입니다.

 

📑클래스형 컴포넌트

import { Component } from "react";

class ClassCom extends Component {
  render() {
    return <div>class type component</div>;
  }
}

export default ClassCom;

클래스형 컴포넌트는 함수형 컴포넌트가 나오고 클래스형 컴포넌트의 역할을 하기 전까지 사용되었던 형태입니다. 생성자 함수 대신 render() 함수가 필수적인 요소입니다.

 

📑함수형 컴포넌트

import React from "react";

// function FuncCom() {
//   return <div>function type component</div>;
// }

// 화살표 함수도 사용 가능합니다.
const FuncCom = () => {
  return <div>function type component</div>;
};

export default FuncCom;

초기 함수형 컴포넌트는 라이프사이클 기능과 state 기능을 사용할 수 없었지만 hook의 등장으로 해당 기능들이 사용가능해지면서 공식사이트에서도 함수형 컴포넌트의 사용을 권장하고 있습니다. 또한 JS의 함수와 같은 형태로 사용하지만 컴포넌트의 경우 항상 첫 글자가 대문자이어야 합니다.

import React from "react";
import "./App.css";
import ClassCom from "./components/ClassCom";
import FuncCom from "./components/FuncCom";

function App() {
  return (
    <div className="App">
      <ClassCom></ClassCom>
      <FuncCom></FuncCom>
    </div>
  );
}

export default App;

위 코드에서 볼 수 있듯이 만들어진 컴포넌트는 마치 기존에 사용하던 HTML의 태그처럼 사용할 수 있습니다.

 

📄state

리액트에서는 화면에서 사용자와 상호작용에 따라 데이터가 변하는 것을 state(상태)를 통해 관리합니다. JS의 변수처럼 선언하고 사용가능하지만 무작정 변하는 것을 막기 위해 useState라는 hook을 사용해야만 상태를 초기화하고 변경해야 렌더링이 됩니다.

import { useState } from "react";

const Test: React.FC = () => {
  let i = 0;
  const [iState, setIState] = useState<number>(0);

  return (
    <div>
      i : {i}
      <br />
      iState : {iState}
      <br />
      <button
        onClick={() => {
          i++;
          setIState((prev) => prev + 1);
          console.log(`i:${i},iState:${iState}`);
        }}
      >
        plus
      </button>
    </div>
  );
};

export default Test;

state 사용과 미사용의 차이

 

📑useState

state를 추가할 수 있는 hook으로 상태의 변화를 감지하고 변화에 따라 화면을 새로 그려줍니다. useState의 반환값으로는 배열이 반환되는데 이를 구조분해할당을 이용해 상태 이름과 변경함수로 받아서 사용합니다. 변경함수의 이름의 경우 상태 이름 앞에 set을 붙여서 사용합니다.

const [state이름, state변경함수] = useState<타입>(초기값);

// useState를 살펴보면 반환 값으로 배열을 반환한다.
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// 사용 예시
const [newTodo, setNewTodo] = useState<string>("");

 

변경함수를 사용하는 방법에는 2가지가 있습니다. 상황에 따라 적절히 사용하면 됩니다.

const [i, setI] = useState<number>(0);

// 1. 타입에 맞는 값 할당하기
setI(i+1);

// 2. 콜백함수를 통해 이전 상태 값을 가져와 처리하기
setI((prev)=>{
  return prev + 1
});

🍯tip! type 키워드는 타입을 새로 지정할 때 주로 사용하고, interface 키워드는 새로운 구조를 잡을 때 사용한다고 생각하면 좋다.

 

📄배열 화면에 그리기 in JSX

JSX에서는 배열을 통해 화면을 그리고 싶을 때 for문을 사용할 수 없습니다. 그 대신 배열의 내장 함수들을 이용해 반복문을 활용할 수 있습니다.

반복문을 사용해 화면을 그릴 때 참고할 사항은 key 값을 설정해줘야 한다는 것입니다. 없어도 에러가 생기거나 동작하는데 문제는 없지만 key를 설정해 두면 해당 요소를 관리하는 것이 편해집니다.

import React, { useState } from "react";

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

const TodoList: React.FC = () => {
  const title: string = "Today's Work";
  const [todos, setTodos] = useState<Todo[]>([
    { id: 0, text: "잠자기", isChecked: false },
    { id: 1, text: "공부하기", isChecked: false },
  ]);
  
  return (
    <>
      <div className="container">
        <h1>{title}</h1>
        <ul className="board">
          {todos.map((todo) => (
            <li key={todo.id}>
              {todo.text}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

export default TodoList;

배열의 map을 활용해 그린 화면

🍯tip! Date로 시간을 나타낼 때 따로 설정한 포맷이 없다면 toLocaleTimeString()을 이용하면 나라별로 설정된 시간의 형태로 자동으로 변한다.

 

이 외에 todolist를 만들어보고 있습니다. 자세한 코드는 Github에 있습니다.

ProgrammersSchool/FE-REACT/todolist at main · nulzi/ProgrammersSchool

 

❔▪❓

Q.<del> 태그를 사용하는 것과 class를 통해 CSS를 추가하는 것 중 어느 것이 성능이 더 좋은가?

{todo.isChecked ? <del>{todo.text}</del> : todo.text}

 

Q.강사님이 ...(spread)연산자를 통한 복사를 깊은 복사라고 설명하셨는데 내가 알기로 그게 아닌데...?

 

다음 시간에 계속...

 

출처 & 참고

이창현 강사님의 강의