250313 - 특정 state 일 때만 요소 보이게 하기

창업팀 개발이다... 솔룩스 OT 전이라 정신이 하나도 없어서 학교 수업 복습은 손도 못대고 있다

최악,... 그래도 해결 되면 좀 덜 정신 없겠지?

강의별로 과제 공개 여부가 따로 있고 해당 값이 true 일 때만

강의실 관리 페이지 상단의 메뉴에서 관리 -> 요약 이렇게 요약 페이지로 넘어갈 수 있게 구현해야했다

 

일단 api 파일을 하나 사용했다

로직은 어렵지 않은데 저 classApi 파일에서 강의 목록의 isAssignmentPublic 만 가지고 따로 저장해둔다

export const getMyCoursesTitles = async (userId) => {
  const courses = await getMyCourses(userId);

  return courses.map((course) => ({
    courseId: course.courseId,
    courseTitle: course.courseTitle,
    isCreator: String(course.user?.userId) === String(userId),
    isAssignmentPublic: course.isAssignmentPublic,
  }));
};

 

그리고 이걸 사용할 페이지에서 getMyCoursesTitles 라는 이름으로 import 해주고

import { getMyCoursesTitles } from "../../api/classApi";

 

useEffect 를 이용해 정보를 받아와 저장해둔다

  useEffect(() => {
    const fetchClasses = async () => {
      if (!user?.userId) return;
      const courses = await getMyCoursesTitles(user.userId);
      setClassOptions(courses);
  
      const foundCourse = courses.find(
        (course) => String(course.courseId) === String(courseId)
      );
      setCurrentCourse(foundCourse || null);
    };
  
    fetchClasses();
  }, [user?.userId, courseId]);

 

사실 저 classApi 를 내가 짠건 아니고, 나는 그냥 isAssignmentPublic 한 줄 추가한거라 많은 로직 수정이 불가해서 const foundCouse 부터 내가 작성했다

전체 강의 목록에서 courseId 가 일치하는, 내가 찾는 강의를 찾아서 현재 강의를 넣어놓는 currentCourse 변수에 추가해주었다

 

{(currentCourse?.isCreator || currentCourse?.isAssignmentPublic) && (
  <TabLink
    to={`/class/${courseId}/admin/summary`}
    className={getActiveTab() === "admin" ? "active" : ""}
  >
    관리
  </TabLink>
)}

 

그래서 그냥 currentCourse.isCreator : 내가 강의 개설자이거나, currentCourse.isAssignmentPublic : 강의 공개 여부가 True 일 때 아래 관리 탭을 보이게 설정했다

 

요약에서도 똑같이 가져와서 확인하고, 원하는 조건에만 보이게 띄우면 끝

 

React 렌더링에 대해 좀 더 공부해야겠다 슬슬 기억이 안 난다..