5주차 개발일지

dayjs 라이브러리를 활용하여 To Do List 만들기

Utility 부분

/*
* @param day 0 ~ 6
  @return 일 ~ 월
*/
export const getDayText = (day) =>{
  switch (day) {
    case 0: return "일";
    case 1: return "월";
    case 2: return "화";
    case 3: return "수";
    case 4: return "목";
    case 5: return "금";
    case 6: return "토";
    default: return ' ';
  }
}
/*날짜 별 색깔 바꾸는 component*/
export const getDaycolor = (day) =>{
  return  day === 0 ?"#e67639": day === 6 ? "#5872d1" : "#2b2b2b";
}

flatList와 map()함수

const flatListRef = useRef(null);// 초기 값은 null 이다.
// ref은 FlatList의 reference의 주소 값을 가져온다.
const scrolltoEnd = () => {
    setTimeout(() => {
      flatListRef.current?.scrollToEnd({ animated: true });
    }, 400);
  }
<FlatList
		showsVerticalScrollIndicator={false}
        ref={flatListRef}
        focusable={true}
        style={{flex:1}}
        ListHeaderComponent={Header}
        data={filteredTodoList}
        renderItem={renderItem}
        removeClippedSubviews={false}
/>
<View style={{flexDirection:"row"}}>
          {[0,1,2,3,4,5,6].map((day)=>{
          const datetext = getDayText(day);
          return(
            <Column text={datetext} color={getDaycolor(day)} opacity={1} key={`day-${day}`} disabled={true}/>
          )
        })}
</View> 

const todolistkey ="todolistkey";
AsyncStorage.setItem(todolistkey,JSON.stringify(newtodolist));// 비동기식 저장 방법 자바스크립트의 값을 Json의 형태로 변환하고 value를 string으로 변환해 준다. setItem에 파라미터는 문자열이다.
	const init = async() =>{
    const result = await AsyncStorage.getItem(todolistkey);// item들을 가져온다.
    if(result){ //true이면
      const newtodolist = JSON.parse(result);// Json데이터를 자바스크립트의 value로 파싱한다.
      console.log('newTodoList',typeof newtodolist , newtodolist);
      setTodolist(newtodolist);// 투두리스트를 설정을 해준다.
    }   
  }