본문 바로가기

JS/React Project

📆 위클리 플래너 - 주제

subject를 저장할 때 중복된 이름의 subject가 저장되면 return을 시키려고 한다. 

const subject = createSlice({
  name: "subject",
  initialState: [
    {
      userId: "4qPCMlanKiXhsIDIKeUrIZxi7qm1",
      subjectId: "sub_4qPC_영어",
      subject: "영어",
      color: "#ffd6f5",
    },
    {
      userId: "4qPCMlanKiXhsIDIKeUrIZxi7qm1",
      subjectId: "sub_4qPC_운동",
      subject: "운동",
      color: "#d6e0ff",
    },
    {
      userId: "Lfn5WQtmuIPbTIaw8vpQdDIiKs62",
      subjectId: "sub_Lfn5_생활",
      subject: "생활",
      color: "#d7ffd6",
    },
    {
      userId: "Lfn5WQtmuIPbTIaw8vpQdDIiKs62",
      subjectId: "sub_Lfn5_코딩",
      subject: "코딩",
      color: "#e3d6ff",
    },
  ],
  reducers: {
    // 주제 추가
    addSubject(state, action) { 
        // 해당 유저의 state
        const filteredState = state.filter((it)=> it.userId === action.payload.userId);
       
        // 조건식(주제 이름이 같은지)
        const isSubDuplicate = filteredState.some(it=> it.subject === action.payload.subject);

        if(isSubDuplicate) { 
            alert("중복된 주제입니다.");
            return state;
        } else { 
            return [...state, action.payload];
        }
    },

    // 주제 삭제
    deleteSubject(state, action) {
      return state.filter((it) => it.subjectId != action.payload);
    },
  },
});

* map과 some 

- map은 배열 내 각 요소를 변환하고 새로운 배열을 반환하는 데 사용되며, 배열의 각 요소를 순회하며 주어진 함수를 적용하고 

  그 결과를 새로운 배열에 저장한다. 

- some은 배열 내 요소 중 하나라도 주어진 조건을 만족하는지 확인할 때 사용하는 것으로 만족하면 false 아니면 false를 반환한다. 

  또한, 배열을 순회하며 조건을 체크하다가 조건을 만족하는 요소를 찾으면 나머지 요소는 확인하지 않고 바로 반환한다. 

// map
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

// some
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // true (최소한 하나의 짝수가 있음)