오늘은 메모장에 고정기능을 추가해보았습니다.
영상
제가 생각한 모습대로 디자인이 잘 나온 것 같아서 매우 기분이 좋습니다 ㅎㅎ
문제 해결 과정
# 문제1
일단은 완성은 했지만 제 맘에 들지 않는 부분은 메모 부분에서 고정을 눌렀을 때 바로 아래의 메모가 스와이프 된 상태로 '고정'이란 버튼이 나오는 것입니다. 이를 해결하기위해 검색을 해보았더니
updateRef = (ref) => {
this._swipeableRow = ref;
};
close = () => {
this._swipeableRow.close();
};(참고:https://junglow9.tistory.com/18)
이것을 활용하여 ref 값을 주고 _swipeableRow를 닫아주는 형식으로 코드를 작성해보았는데 에러가 났습니다.. 조금 더 찾아봐야 할 것 같습니다. 저와 같은 에러를 겪은 사람들이 있는 것 같은데 하루만에 찾아내지 못해 아쉽습니다.
[2021/06/08 / 추가설명] : 해외포럼을 찾던 도중 useState를 사용하여 리렌더링을 해주면된다는 의견을 보고 useState를 사용해 보았지만 되지않았습니다.
# 문제2
또 다른 문제로는 고정 버튼을 클릭하면 고정된 메모로 일반 메모가 올라가고 고정버튼을 고정해제로 바꿔주고 싶었습니다. 그래서 상태값에 pin:false를 기본으로 입력하고 고정된 메모안에 들어갈 상태를 pinTodos로 선언했습니다.
state = {
todos: [
{
title: "고정지출",
done: true,
pin: false,
},
{
title: "헬스 스케쥴",
done: false,
pin: false,
},
{
title: "장보기",
done: false,
pin: false,
},
{
title: "잠 일찍 자기",
done: false,
pin: false,
},
],
pinTodos: [],
showModal: false,
};그리고 버튼을 클릭하면 상태의 pin 값이 true가 되게 설정했습니다.
pin={() => {
//pin값 바꾸는 부분!
const changePin = [...this.state.todos];
changePin[index].pin = !changePin[index].pin;
this.setState(
{
todos: changePin.filter((item, i) => i !== index),
pinTodos: this.state.pinTodos.concat(
changePin.filter((item, i) => i === index)
),
},
this.save
);
//기존 메모에서 지우고, 고정된 메모에 값이 뜨게 한다.
}}고정해제를 하는 부분은 이와 반대로 작성하였습니다.
마지막으로 pin값에 따라 다른 버튼이 뜨도록 만들었습니다.
const Pinbutton = ({ onPress, checkPin, unpin }) => {
return checkPin ? (
<TouchableOpacity activeOpacity={0.8} style={styles.button} onPress={unpin}>
<Text style={styles.text}>고정해제</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
activeOpacity={0.8}
style={styles.button}
onPress={onPress}
>
<Text style={styles.text}>고정</Text>
</TouchableOpacity>
);
};제가 처음 생각한대로 한번에 성공해서 좋았지만, 스와이핑된 고정버튼을 해제할만한 방법을 좀 더 찾아야겠습니다.
주절주절
저는 평소에 하나에 꽂히면 답을 알아낼 때까지 시간을 보내는 경향이 있어서 하루에 임의로 정해놓은 시간동안 공부하는것을 규칙으로 정했는데 점점 공부를 마무리하는 시간이 늦어지는 것 같아서 아쉽습니다. 이는 집중력이 떨어지고 있다고 봐도 무방할 것 같다는 생각도 들어 매우 슬픕니다ㅠ 하지만 이 사실을 자각했으니 내일은 조금 더 집중할 수 있는 하루를 보낼 수 있도록 노력해야겠습니다.
[2021/06/10 / 추가설명]: 현재 스와이프 되는 부분을 계속 붙잡기 보다는 실제 프로젝트를 진행하면서 문제를 해결해보는 것이 났다고 판단되어서 실제 프로젝트를 추진 중에 있습니다. 와이어프레임과 간단한 실제 구현시 디자인을 그려보고 있는데 맘에 들지 않아서 고민입니다....하지만 이런 기회로 다른 많은 어플들은 어떻게 디자인 되어있고 어떤 기능이 구현되어 있는지 찾아보게 되는 좋은 계기가 되는 것 같습니다.
