[원티드] 5월 12일 TIL

‘Must use destructuring props assignment (react/destructuring-assignment)’ lint rule

props받아올때 props.으로 받지말고
비구조 할당으로 풀어서 받아오기

export default function Cadastro(props) {
  const Email = props.user.email;
To:

export default function Cadastro({ user }) {
  const Email = user.email; 
  // ...

What is the right way to toggle a value inside object state in React hooks?

prev state의 활용

const toggleButton = () => {
  setState(prevState => ({ isOpen: !prevState.isOpen }));
};

react-beautiful-dnd

기본 예제인 vertical-list를 통해 익혀보았다

참고:

https://codesandbox.io/s/gracious-dirac-zhy27?file=/src/App.js:0-1466

import "./styles.css";
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default function App() {
  const [todos, setTodos] = useState([
    { id: "1", title: "공부" },
    { id: "2", title: "헬스" },
    { id: "3", title: "독서" },
    { id: "4", title: "산책" },
    { id: "5", title: "요리" }
  ]);
  
  
  //result에 대한 콘솔
 {draggableId: '5', type: 'DEFAULT', source: {…}, reason: 'DROP', mode: 'FLUID', …}
combine: null
  //바뀌는 주체의 정보
destination: {droppableId: 'todos', index: 2}
draggableId: "5"
mode: "FLUID"
reason: "DROP"
source: {index: 3, droppableId: 'todos'}
type: "DEFAULT"
[[Prototype]]: Object
//
  //드롭이 끝났을때 순서 변경 로직
  const handleChange = (result) => {
    if (!result.destination) return;
    console.log(result);
    const items = [...todos];
    //잘라서 destination앞에 붙혀준다
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    setTodos(items);
  };
  return (
    <DragDropContext onDragEnd={handleChange}>
      <Droppable droppableId="todos">
        {(provided) => (
          <ul
            className="todos"
            {...provided.droppableProps}
            ref={provided.innerRef}
          >
            {todos.map(({ id, title }, index) => (
              <Draggable key={id} draggableId={id} index={index}>
                {(provided) => (
                  <li
                    ref={provided.innerRef}
                    {...provided.dragHandleProps}
                    {...provided.draggableProps}
                  >
                    {title}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}

draggable id는 string타입이어야 한다!!!