[DEVOCEAN 스쿨] RN(React Native) 스터디 4주차

Eden 23.05.31

356 13 0

facebook twitter kakao link

13 0

facebook twitter kakao link

안녕하세요. Teus님과 함께 React Native 스터디를 진행하고 있는 SK네트웍스 왕태웅(Eden) 입니다.

스터디 4주차 포스팅이 조금 늦었네요..

4주차에는 교재 7장을 읽고 토론을 진행 했구요.

그리고 각 조별로 어떤 프로젝트를 진행할지 조별 첫 모임을 가졌습니다.

1. 아이스 브레이킹

모두가 기대하는 스터디의 아이스브레이킹 시간입니다.

이번주 아이스브레이킹은 YS님의 주도로 두 팀으로 나누어 그림 퀴즈를 진행했는데요

팀원들 각 자가 3초내에 그림을 이어 그리고 완성된 그림을 보고 마지막 팀원이 정답을 맞추는 게임입니다!

대부분 20대~30대 초 (몇몇을 제외하고..) 로 구성된 저희 멤버들 답게 굉장히 창의적인 그림들이 많이 나왔었네요~

여러분들도 함께 맞춰보세요!

속담 퀴즈~~

아래는 영화 입니다~

퀴즈 후에 승리한 팀은 진행자인 YS님이 직접 준비한 비타민계의 에르메스(?)

'이뮨 비타민'을 하나씩 받았습니다~ (YS님 감사해요~~)

2. 스터디 내용

이번주 주제는 달력 만들기 입니다!

* 달력기능 구현하기

달력 화면을 만드는 과정에서 react-native-calendars라는 라이브러리사용하기 위해 아래와 같이 설치합니다

$ yarn add react-native-calendars

라이브러리를 설치한 다음에는 CalendarView라는 컴포넌트를 만듭니다.

이 컴포넌트에서는 방금 설치한 라이브러리를 사용해 달력을 보여주고, 로그가 작성된 날짜를 달력에 표시하도록 구현하는 내용으로 학습을 진행하였습니다.

components/CalendarView.js

import React from 'react';
import {Calendar} from 'react-native-calendars';
import {StyleSheet} from 'react-native';

function CalendarView() {
  return <Calendar style={styles.calendar} />;
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
});

export default CalendarView;

CalendarView 컴포넌트를 작성한 다음 CalendarScreen에서 사용 합니다.

screens/CalendarScreen.js

import React from 'react';
import CalendarView from '../components/CalendarView';

function CalendarScreen() {
  return <CalendarView />;
}

export default CalendarScreen;

이렇게 기본적인 달력 화면을 띄울 수 있습니다.

* 달력에 날짜 표시하기

사용자가 달력에서 특정 날짜를 선택 해 해당 날짜에 작성된 로그를 조회할 수 있는 기능을 만들어 봅니다.

이 기능을 구현하기 위해 사용자가 현재 선택한 날짜, 로그를 작성한 날짜에 표시하고 달력에 사용되는 색상들도 변경 해 보겠습니다.

components/CalendarView.js

import React from 'react';
import {Calendar} from 'react-native-calendars';
import {StyleSheet} from 'react-native';

function CalendarView() {
  // 현재 연/월 사용하기
  const markedDates = {
    '2021-05-17': {
      selected: true,
    },
    '2021-05-18': {
      marked: true,
    },
    '2021-05-19': {
      marked: true,
    },
  };
  return (
    <Calendar
      style={styles.calendar}
      markedDates={markedDates}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }}
    />
  );
}

const styles = StyleSheet.create({
  calendar: {
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
});

export default CalendarView;

달력에 표시하기 위해 markedDates라는 객체를 사용합니다.

이 객체에 들어가는 키 값은 날짜의 ‘yyyy-MM-dd’ 형태입니다.

표시를 원하는 각 날짜에 객체를 만들고, 거기에 marked 값을 true로 설정하면 날짜에 점이 나타납니다.

selected 값을 true로 설정하면 이 날짜를 선택했다는 의미로 날짜의 배경색을 변경합니다.

표시하는 색상은 theme이라는 Props를 통해 변경할 수 있습니다.

달력에서 사용하는 색상은 앱을 리로드해야 반영됩니다.

* 데이터를 달력과 연동하기

이번에는 데이터의 날짜를 표시하도록 구현 해 봅니다.

우선 CalendarScreen에서 LogContext의 logs 배열을 받습니다

screens/CalendarScreen.js

import React, {useContext} from 'react';
import CalendarView from '../components/CalendarView';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  return <CalendarView />;
}

export default CalendarScreen;

다음으로 이 logs 배열을 Calendar 컴포넌트의 markedDates Props 형태로 변환 해 줍니다.

변환된 객체는 CalendarView에 전달 합니다.

screens/CalendarScreen.js

import {format} from 'date-fns';
import React, {useContext} from 'react';
import CalendarView from '../components/CalendarView';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  const markedDates = logs.reduce((acc, current) => {
    const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
    acc[formattedDate] = {marked: true};
    return acc;
  }, {});

  return <CalendarView markedDates={markedDates} />;
}

export default CalendarScreen;

reduce 함수를 사용해서 로그가 작성된 날짜를 달력에 표시 합니다.

여기서 사용된 reduce라는 함수는 배열의 내장 함수입니다. 이 함수는 배열 안의 값을 연산해 하나의 결과값으로 만들 때 사용합니다

이 reduce 함수에서 사용하는 초기값은 비어있는 객체입니다.

그리고 각 원소의 날짜를 yyyy-MM-dd 형태로 변환한 후 변환된 값을 객체의 key로 사용해 {marked: true} 값을 지정해줍니다.

이렇게 하면 로그가 작성된 날짜에만 해당 객체 값이 지정되어 로그 작성 날짜가 달력에 표시될 것입니다.

다음으로 selectedDate라는 상태를 만듭니다.

이 값은 현재 선택된 날짜를 의미하며 기본값은 오늘 날짜입니다.

selectedDate와 setSelectedDate 또한 CalendarView에 전달하고 setSelectedDate는 onSelectDate라는 이름으로 설정합니다.

screens/CalendarScreen.js

import {format} from 'date-fns';
import React, {useContext, useState} from 'react';
import CalendarView from '../components/CalendarView';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  const {logs} = useContext(LogContext);
  const [selectedDate, setSelectedDate] = useState(
    format(new Date(), 'yyyy-MM-dd'),
  );

  const markedDates = logs.reduce((acc, current) => {
    const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
    acc[formattedDate] = {marked: true};
    return acc;
  }, {});

  return (
    <CalendarView
      markedDates={markedDates}
      selectedDate={selectedDate}
      onSelectDate={setSelectedDate}
    />
  );
}

export default CalendarScreen;

그다음에는 CalendarView에서 markedSelectedDate라는 새로운 객체를 만들어 현재 날짜에 selected: true를 설정합니다.

components/CalendarView.js

import React from 'react';
import {Calendar} from 'react-native-calendars';
import {StyleSheet} from 'react-native';

function CalendarView({markedDates, selectedDate, onSelectDate}) {
  const markedSelectedDate = {
    ...markedDates,
    [selectedDate]: {
      selected: true,
      marked: markedDates[selectedDate]?.marked,
    },
  };

  return (
    <Calendar
      style={styles.calendar}
      markedDates={markedSelectedDate}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }}
    />
  );
}

(...)

이제 달력에서 날짜를 선택했을 때 onSelectDate를 호출해줘야 합니다.

이는 Calendar에 onDayPress라는 Props를 설정 해 구현할 수 있습니다.

components/CalendarView.js - return

function CalendarView({markedDates, selectedDate, onSelectDate}) {
  (...)
  return (
    <Calendar
      style={styles.calendar}
      markedDates={markedSelectedDate}
      onDayPress={(day) => {
        onSelectDate(day.dateString);
      }}
      theme={{
        selectedDayBackgroundColor: '#009688',
        arrowColor: '#009688',
        dotColor: '#009688',
        todayTextColor: '#009688',
      }}
    />
  );
}

* 달력 하단에 로그 목록 보여주기

이번에는 특정 날짜를 선택했을 때 그날 작성된 로그들을 달력 하단에 목록으로 표시하는데, 이때 FeedList를 재사용 할 수 있습니다.

FeedList에서 사용한 FlatList에 ListHeaderComponent라는 Props를 사용하여 FlatList의 내용 상단부에 특정 컴포넌트를 보여줄 수 있습니다.

FeedList 컴포넌트를 아래와 같이 수정합니다.

components/FeedList.js

import React from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import FeedListItem from './FeedListItem';

function FeedList({logs, onScrolledToBottom, ListHeaderComponent}) {
  (...)

  return (
    <FlatList
      data={logs}
      style={styles.block}
      renderItem={({item}) => <FeedListItem log={item} />}
      keyExtractor={(log) => log.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      onScroll={onScroll}
      ListHeaderComponent={ListHeaderComponent}
    />
  );
}

(...)

그 다음에는 CalendarScreen에서 현재 선택된 날짜로 로그를 필터링해 FeedList에 전달하고 ListHeaderComponent에는 CalendarView를 설정합니다.

screens/CalendarScreen.js

import {format} from 'date-fns';
import React, {useContext, useState} from 'react';
import CalendarView from '../components/CalendarView';
import FeedList from '../components/FeedList';
import LogContext from '../contexts/LogContext';

function CalendarScreen() {
  (...)

  const filteredLogs = logs.filter(
    (log) => format(new Date(log.date), 'yyyy-MM-dd') === selectedDate,
  );
  return (
    <FeedList
      logs={filteredLogs}
      ListHeaderComponent={
        <CalendarView
          markedDates={markedDates}
          selectedDate={selectedDate}
          onSelectDate={setSelectedDate}
        />
      }
    />
  );
}

export default CalendarScreen;

이제 달력에서 날짜를 선택했을 때 달력 하단에 로그 목록을 볼 수 있습니다.