TIL: 오답 노트(상세페이지에서 데이터 불러오기)

📌 id와 일치하는 상세페이지 데이터 불러오기

문제상황: id는 useParams를 통해 가져왔으나 title과 body 데이터를 가져오지 않은 상황

 

 

✔️ 베스트 풀이

useEffect(() => {
  dispatch(getTodoByID(id));
}, [dispatch, id]);

redux > modules > todos.js에 GET_TODO_BY_ID case가 구현되어 있으므로 useEffect hook을 활용하여 id값이 변경될 때마다 해당 case에 dispatch해준다.

 

 

✔️ 내가 시도한 방법 01

useEffect를 잘 몰라서 틀렸다고 생각했는데 다른 방법으로도 풀 수 있다고 해서 시도해보았다.

이미 구현되어 있는 GET_TODO_BY_ID case를 활용하지 않는 방법이다.

 

const todos = useSelector((state) => state.todos.todos);
const { id } = useParams();

const [findData] = todos.filter((item) => item.id === id);
   
  // (생략)
  
  return (
   <StTitle>{findData.title}</StTitle>
   <StBody>{findData.body}</StBody>
   )

 

useSelector를 활용하여 todos 객체에 접근한 후

filter()로 id가 같은 데이터를 반환한다. 단 filter() 메서드는 조건을 만족하는 요소들로 이루어진 배열을 반환하기 때문에, 배열을 풀어야 하므로, 비구조화 할당(Destructuring assignment)을 사용하여 요소에 직접 접근한다.

// 비구조화 할당
const [findData] = todos.filter((item) => item.id === id);

 

 

✔️ 내가 시도한 방법 02

 

베스트 풀이와 비슷한 답변으로 find() 메서드를 활용할 수도 있다.

const todos = useSelector((state) => state.todos.todos);
const { id } = useParams();

const findData = todos.find((item) => item.id === id);
   
  // (생략)
  
  return (
   <StTitle>{findData.title}</StTitle>
   <StBody>{findData.body}</StBody>
   )

filter() 메서드는 조건을 만족하는 모든 요소로 이루어진 새로운 배열을 반환하는 반면, find() 메서드는 조건을 만족하는 첫 번째 요소를 반환한다. 따라서 비구조화 할당 과정이 필요하지 않게 된다.