Detail.js 에서 특정 객체 접근 관련 질문

const Detail = () => {
  const param = useParams().id;
  const navigate = useNavigate();

  const todoList = useSelector((state) => {
    return state.todo.list.filter((e) => e.id === param);
  })[0];
  // 인덱스로 하는게 맞나..?

  return (
    <Layout>
      <Todo_container>
        <Todo_container_header>
          <span>id: {todoList.id}</span>
          <Back_button onClick={() => navigate(-1)}>뒤로가기</Back_button>
        </Todo_container_header>

        <Todo_container_body>
          <h2>Title: {todoList.title}</h2>
          <span>Content: {todoList.content}</span>
        </Todo_container_body>
      </Todo_container>
    </Layout>
  );
};

React-TodoList/src/pages/detail)/Detail.js 위의 코드 경로입니다. params를 통해 todolist의 세부정보를 가져오는 과정에서 id로 접근해 전체 리스트에서 특정 객체만을 가져오게 했습니다. filter함수를 통해 가져오면 길이가 1인 배열만이 리턴되기에 0번 인덱스를 통해 원하는 객체를 가져왔는데 저 방식이 맞는지 모르겠습니다ㅠㅠ

틀린 방식은 아니라고 생각합니다! filter, findIndex 등 특정 요소를 서칭하는 방법은 여러가지가 있으니까요~ useSelector 에서 배열 filter를 바로 처리 하셨는데 특정 요소를 서칭하는 로직을 reducer에서 처리하시면 조금 더 직관적으로 보일 것 같습니다.

위 까지는 게더에서 말씀 드렸던 내용이고 전체적인 코드를 쭉 읽어보았는데 상태관리가 매우 잘 되어있습니다.

handler 안에 있는 함수를 조금 더 쪼개는 것도 가능해보여요! input을 빈 값으로 만들어 주는 로직도 따로 빼두고 재사용 가능하게 한다던가..

"구조분해할당" 도 잘 해주셨어요! eventHandler 에서도 적용 가능합니다. (ex : {value, id, name} = e.target)

직관적인 코드를 작성하시려고 노력하신게 보였습니다. 고생 많으셨어요!

Seokjun7074 / React-TodoList

Detail.js 에서 특정 객체 접근 관련 질문 #1