[React] 필터링 및 결과 리스트 렌더링

목표 _ React에서 사용자의 특정 결과값을 필터링하는 기능 구현하기

• 공개 설정한 결과값만 리스트 페이지에 표시하기
• 현재 로그인한 사용자의 결과값은 공개 여부와 관계없이 항상 화면에 표시하기

 

구현 과정 _ 테스트 결과 렌더링하기

필터링된 결과를 map 메서드로 TestResultItem 컴포넌트에 렌더링한다.

 

visibleResults.map((result) => (
  <TestResultItem
    key={result.id}
    results={result}
    currentUserId={currentUserId}
    onUpdate={onUpdate}
    onDelete={onDelete}
  />
));

 

 

구현 과정 _ 어려웠던 부분

 

뭐야 잘 되고 있잖아? 지가모태노코노코 패치탓탓

 

개발자 도구에서 네트워크 탭을 확인해 보면 비공개 / 공개 전환에 대한 요청이 정상적으로 진행되고 있다. 그런데 다른 아이디로 로그인했을 때 비공개 설정이 적용되지 않거나, 현재 로그인한 사용자의 테스트 결과가 전부 표시되지 않는 문제가 있었다. 튜터링 과정에서 네트워크 헤더, 페이로드 부분을 확인하고 요청 수신에는 아무 문제가 없음을 확인했으므로 렌더링할 때 빼놓은 부분이 있으리라고 생각해서 검토했다. 수정해야 할 부분은 다음과 같다.

• visibility가 true인 결과물만 필터링하기
• 현재 로그인한 사용자의 항목은 visibility가 false여도 표시하기

 

구현 과정 _ 해결 방안

 

◆ 결과 필터링

 

results 배열에 대해 filter 메서드를 사용해서 표시할 항목을 필터링한다. visibility 값이 true인 결과는 항상 표시하고, userId가 currentUserId(현재 유저의 아이디)와 동일한 결과는 visibility 값에 관계없이 표시해 준다.

// 필터링 조건 설정하기
const visibleResults = results.filter(
  (result) => result.visibility || result.userId === currentUserId
);

 

 

◆ 전체 코드

 

스타일링을 적용한 전체 코드를 작성한다.

const TestResultList = ({ results, currentUserId, onUpdate, onDelete }) => {
  // 필터링 조건: visibility가 true이거나 현재 로그인한 사용자의 결과는 항상 포함하기
  const visibleResults = results.filter(
    (result) => result.visibility || result.userId === currentUserId
  );

  return (
    <div className="bg-white max-w-2xl w-full mt-10 mb-10 space-y-4">
      {visibleResults.map((result) => (
        <TestResultItem
          key={result.id}
          results={result}
          currentUserId={currentUserId}
          onUpdate={onUpdate}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
};

export default TestResultList;

 

 

학습내용

• 필터링 조건 설정 : filter 메서드를 사용해 데이터를 조건에 맞게 필터링하고, 여러 조건을 조합해서 원하는 결과만 렌더링하게 만들 수 있다.
• react의 동적 컴포넌트 생성 : 데이터를 map 메서드로 동적 렌더링해서 상태가 변동함에 따라 UI에 반영할 수 있다.
• Tailwind CSS 활용 : Tailwind CSS의 유틸리티 클래스 (space-y-4, max-w-*, mt-*, mb-* 등) 사용을 통해 원하는 레이아웃을 구현할 수 있다.

 

개선 방향과 활용방안

이런 방식을 통해 특정 사용자의 데이터만 표시하거나, 사용자의 권한에 따라 데이터를 필터링할 수 있을 것이다. 관리자와 사용자가 서로 다른 데이터를 볼 수 있도록 필터링하는 조건을 추가해보는 방법을 생각할 수 있다.