만두의 프론트엔드 찍먹 일기

안녕하세요. 게으른 만두입니다.

이번 특화 프로젝트에서 프론트엔드를 맡게 되어 울면서 공부 중 입니다.

이번에 공부한 리액트 내용 공유 드리겠습니다.

모든 백엔드가 프론트를 하는 그 날까지 화이팅!

 

🥹 리액트!

 프론트엔드에서는 CDD(Component-Driven Development)로 컴포넌트 단위로 개발합니다. 특정 기능들을 수행하는 작은 모듈로 구성해서 전체 화면을 구성할 수 있습니다. 그러면 재사용성을 높이고, 독립적인 테스트와 개발을 할 수 있으며 디자인 일관성을 지킬 수 있다는 장점이 있습니다. 이번 프로젝트의 컴포넌트는 이렇게 구성되어 있습니다. 오늘의 날짜를 알려주는 헤더, 새로운 TODO 입력 컴포넌트, TODO 리스트 컴포넌트, 리스트 안에 리스트 아이템들이 컴포넌트로 구성되어 있습니다.

 

 리액트를 처음 사용하면서 가장 낯설었던 점은 JSX 였는데요. 이전에 사용한 Vue는 자바 스크립트, css, html이 따로따로 있었다면 JSX(JavaScript XML)은 HTML과 비슷한 문법으로 React 컴포넌트를 작성할 수 있습니다.

import "./TodoItem.css";

const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => {
  const onChangeCheckbox = () => {
    onUpdate(id);
  };

  const onClickDelete = () => {
    onDelete(id);
  };

  return (
    <div className="TodoItem">
      <input
        readOnly
        type="checkbox"
        checked={isDone}
        onChange={onChangeCheckbox}
      />
      <div className="content">{content}</div>
      <div className="date">{new Date(date).toLocaleDateString()}</div>
      <button onClick={onClickDelete}>삭제</button>
    </div>
  );
};

export default TodoItem;

 

 또 하나, 자바스크립트 문법에 익숙하지 않다가 새로 배운 점은 Spread Operator 였습니다! vue만 사용해봤을 때에는 반복문을 사용해야한다고 생각했었는데 Spread Operator로 간단하게 코드를 표현할 수 있다는 점이 인상깊었고 유용하게 활용할 수 있다고 생각했습니다. 다음은 Spread Operator를 컴포넌트와 배열에 사용해 본 예제 입니다.

      <div className="todos_wrapper">
        {filteredTodos.map((todo) => {
          return (
            <TodoItem
              key={todo.id}
              {...todo}
              onUpdate={onUpdate}
              onDelete={onDelete}
            />
          );
        })}
      </div>

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };

    // todos.push(newTodo) - state값 직접 변경시 리렌더링 불가능
    setTodos([newTodo, ...todos]);
  };

 또 위의 예제에서 주의할 점은 JavaScript 배열에 직접 값을 삽입하거나 변경하면 변화를 제대로 감지하지 못해서 리렌더링이 발생하지 않을 수 있기 때문에 상태 관리 메서드를 사용해서 값을 변경해주어야 값을 변경했을 때 화면이 리렌더링 됩니다.

 

🫨  피그마

 피그마 툴에도 익숙해져보려고 사용해봤습니다. 이번에 배웠던 TODO 리스트를 모바일 버전으로 간단하게 구현하였습니다. 

간단하게 배경에 그라데이션을 넣고 스마트 애니메이션을 사용해서 드래그 애니메이션을 프로토타입으로 만들었습니다. 피그마에도 변수나 버튼에 간단한 기능을 넣어서 실감나는 프로토타입을 만들 수 있어서 편리한 툴인 것 같습니다.

 

글을 마치며

 이번 주는 프론트와 알고리즘을 공부하며 시간을 보냈습니다. 딥하게 공부하지 않고 프로젝트에 당장 적용할 수 있을 정도로만 학습해서 글의 내용이 그렇게 좋지 않은 점 죄송하게 생각합니다.. 더 공부해서 특화 프로젝트와 이후 프로젝트에서 잘 써먹어 보겠습니다. 다들 프론트 하시죠!