학습내용
프로그래머스
문자열 내 마음대로 정렬하기todolist 보완
redux - create 구현
프로그래머스
문자열 내 마음대로 정렬하기
풀이
const solution = (strings, n) => {
strings.sort((a, b) => {
if (a[n] > b[n]) return 1;
else if (a[n] < b[n]) return -1;
else if (a > b) return 1;
else if (a < b) return -1;
});
return strings;
};처음에는 a[n]와 b[n]만을 비교했었는데 테스트1만 통과하고 2는 통과하지 못했다. 테스트2에서는 a[n]와 b[n]의 문자가 동일하기 때문이다. 이처럼 동일한 문자일 경우를 대비해서 단어 자체를 비교하기 위한 a,b 비교도 같이 들어가야 한다.
todolist
진행현황
redux 모듈에서 create 생성 후 컴포넌트와 연결해서 addTodo 기능 구현
const addBtn = () => {
if (!date || !todo) {
return alert("빠진 내용이 없나 확인해보세요.");
} else {
setDate("");
setTodo("");
dispatch(
addTodo({
id: uuid(),
date,
todo,
isDone: false,
})
);
}
};
addTodo에 저장해줄 데이터를 담아서 dispatch를 실행 후, 기존의 setState 작업을 리듀서에서 실행해주는 방식이다.
인풋박스는 상태가 변할 때마다 일일이 저장하는 게 아니기 때문에 Local State로 관리하고, 최종적으로 추가하는 값만 Global state에서 관리했다.
원래는 onChange가 아닌 useRef 방식을 사용했었는데 그렇게 하니까 setState가 불가능해져서 기존의 방식을 사용했다. 물론 안되는 게 아니라 내가 못하는 걸거다ㅎㅎ 해결하고 싶었지만 시간이 없는 관계로 일단 onChange로 쇼부보기로...
에러
인풋박스가 빈칸일 때 alert 반환 후 빈 리스트 추가
기존에는 if문으로 dispatch와 setState 작업을 먼저 해준 뒤 else문으로 alert을 띄우는 방식이었는데 둘의 순서를 바꿔서 해결
특정 투두리스트의 id값 미반환
{list.map((item, i) => {
if (!item.isDone) {
return (
<List
key={i}
onClick={() => {
navigate("/" + i);
}}
>
<Date>{item.date}</Date>
{item.todo}
<ButtonArea>
<Button>{item.isDone ? "cancel" : "done"}</Button>
<Button
id={item.id}
onClick={delBtn}
>
delete
</Button>
</ButtonArea>
</List>
);
}
})}{item.id}로 id를 받아올 시 조건문을 충족하는 모든 리스트의 id를 가져온다. 왜냐하면 map 메서드 때문에 모든 item을 반환하고 있기 때문이다.
이런 경우는 리스트만을 반환하는 컴포넌트를 따로 제작한 후 거기에서 해당하는 id만을 가져오면 된다.
라고 팀원분께서 알려주셨는데 설명을 들었을 땐 이해가 됐는데 직접 해보니까 또 아리송하다.... 오늘 안에 완성하고 싶었는데 시간이 늦은 관계로 내일 다시 물어보는 걸로...^^
내일 할 일
- UPDATE/DELETE 구현하기
- 인풋에 텍스트가 있는 상태에서 상세페이지 이동시 인풋값 초기화 하기
