<AreaPart>
            {locations &&
              locations.map(item => {
                return (
                  <Area
                    key={item.main}
                    onClick={() => setGetId(item.main)}
                    getId={getId === item.main}
                  >
                    {item.main}
                  </Area>
                );
              })}
          </AreaPart>

locations라는 json 파일을 가져와 map을 돌려주는데 처음엔 데이터 없이 render가 되기 때문에 오류가 나고 화면 전체가 뜨지 않는 에러가 생긴다. 이때 json에서 가져온 location을 &&연산자에 걸어두어 location이 참일때, 즉 빈값이 아닐때 (빈값은 false) 실행하는 방법을 사용해 주었다. 이 방법이 여럿 map 함수들을 사용한 곳에 도움이 많이 되었다. 🥹

//booking.js
  const [activeMovie, setActiveMovie] = useState('');

//movie.js
        {movies &&
          movies.map(item => (
            <List
              onClick={() => {
                setActiveMovie(item.title);
                setActivePoster(item.image);
                setGetMovieId(item.id);
              }}
              activeMovie={activeMovie === item.title}
              key={item.id}
            >
              {item.title}
            </List>
          ))}

//styled-components 💅

  ${({ activeMovie }) =>
    activeMovie &&
    `
  background-color: black;
  color: white;`}
`;

부모인 booking.js에서 activeMovie와 setActiveMovie state를 가져와서 특정 영화 제목을 클릭했을 때, 그 영화제목의 색깔과 배경이 바뀌도록 구현하였다. 즉, onClick에 setActiveMovie를 입력하여 클릭했을 때, item.title(영화제목)이 set되게 하고 set된 값이 item.title과 같으면 activeMovie가 동작하여 스타일을 바꾸는 형태로 만들었다. styled-components를 처음 사용해 보아서 처음엔 좀 헤메었고 예전에 사용하던 css와 sass가 그리웠지만 막상 적응하고 나니 별도의 파일 없이 css를 사용할 수 있어서 은근히 깔끔했고 편했다. 그리고 컴포넌트 분리를 시킬때도 컴포넌트화가 된 css를 옮겨주니 정말 편했다. 역시 인간은 적응의 동물이였다 💡

function DateCom({ selectedDay, setSelectedDay, getMovieId, activeLocation }) {
  const [list, setList] = useState('');
  const today = new window.Date();
  const disabledDays = [
    {
      from: new window.Date(2022, 1, 1),
      to: today.setDate(today.getDate() - 1),
    },
  ];
  const modifiers = {
    movieDay:
      list.timeList && list.timeList.map(item => new window.Date(item.date)),
  };

  const modifiersStyles = {
    movieDay: { color: 'white', backgroundColor: 'tomato' },
  };

  useEffect(() => {
    fetch(`/data/test.json`)
      .then(response => response.json())
      .then(result => setList(result));
  }, []);

  return (
    <Date>
      <Title>날짜</Title>
      <Content>
        <CalendarWrapper>
          <DayPicker
            mode="single"
            selected={selectedDay}
            onSelect={setSelectedDay}
            locale={ko}
            onClick={() => {
              setSelectedDay(selectedDay);
            }}
            modifiers={modifiers}
            modifiersStyles={modifiersStyles}
            disabled={disabledDays}
          />
        </CalendarWrapper>
      </Content>
    </Date>
  );
}

내가 사용한 달력 라이브러리는 📅Day-picker. react-calendar, date-picker를 사용해봤지만 결국 Day-picker에 정착했다. 프로젝트 초창기엔 라이브러리를 사용 가능하다고 해서 금방 할 줄 알았다. 이미 만들어진 코드를 복사 붙여넣기만 하면 된다고 생각했던것. 하지만 막상 사용해보니 직접만들고 싶어질 정도로 내가 원하는 기능대로customising는 과정이 어렵다고 느껴졌다. 초창기 계획 한 바에 따르면 달력 전체가 default로 disabled되어야 했고 영화 상영 가능한 날짜만 enabled되어야 했는데 라이브러리를 찾아보고 아무리 구글링을 해 보아도 방법을 찾을 수 가 없었다. 결국 다른 방도로 찾아낸 것이, 영화상영날짜를 색깔로 표현해서 사용자가 몇월 몇일에 특정 영화 상영이 가능한지 알 수 있게 하였다. 일단 라이브러리에 있는 disabled 기능을 살리기 위해 오늘 날짜 new Date()이전의 날은 모두 disable 처리를 했고 이후의 날부터 영화를 선택 할 수 있게 구현하였다. 그리고 서버에서 불러오는 날짜와 형식을 맞추기 위해 date-fns라이브러리를 추가로 사용하였고 지역과 영화이름을 클릭해서 들어오는 날짜에 스타일을 주었다.