1. memo app 코드
import "./MemoList.css";
import { useState } from "react";
import "./MemoList.css";
let dummyMemo = [
{ id: 1, priority: 1, content: "코딩하기" },
{ id: 2, priority: 0, content: "운동하기" },
{ id: 3, priority: 1, content: "기타 연습하기" },
{ id: 4, priority: 0, content: "등산하기" },
];
export default function MemoList() {
const [memos, setMemos] = useState(dummyMemo);
const [filter, setFilter] = useState(false);
return (
<div className="MemoListContainer">
<div className="HeaderPart">
<h1>MEMO</h1>
</div>
<div className="MemoPart">
<div className="radioBox">
<div>
<input
type="radio"
name="filter"
onClick={() => setFilter(false)}
// *1.
></input>
전체 메모
</div>
<div>
<input
type="radio"
name="filter"
onClick={() => setFilter(true)}
></input>
중요 메모
</div>
</div>
<div className="memoBox">
{memos
.filter((memo) => {
return (filter === true) ? memo.priority === 1 : true
// if (filter === true) {
// return memo.priority === 1;
// } else {
// return true;
// } *2
})
.map((memo) => (
<MemoListEntry {...memo} key={memo.id} />
))}
// *3
</div>
</div>
</div>
);
}
function MemoListEntry(props) {
const { id, priority, content } = props;
// *4
return (
<div className="MemoListEntryContainer">
<div className="infoPart">
<div>{id}</div>
<div>{priority === 1 ? "중요" : "일반"}</div>
</div>
<div className="contentPart">
<div>{content}</div>
</div>
</div>
);
}
- 함수를 밖에 따로 정의하지 않고 안에 정의했다. 변수 갱신 함수에 false 값을 인자로 전달했다.
- if문 사용보다 삼항연산자를 사용하니 코드가 훨씬 더 간단해진다.
- filter를 사용해 만들어진 배열에 바로 map 메소드를 쓴 것. 기존에 변수를 활용하던 것보다 나은 것 같기도 하다. filter -> map
- props를 구조분해할당으로 받았다.
- 배열의 요소인 memo를 props로 전달하기 위해서 속성 이름은 지정해주지 않고 전개 연산자를 활용했다.
2.
let score = 80;
function doStuff(value) {
value = 90;
}
doStuff(score) // score의 값은?- 원시자료형은 함수의 인자로 전달할 때 값 자체를 전달하게 되는데, 변경할 수 없다. 따라서 그대로 80이 된다.
var a = 0;
function foo() {
var b = 0;
return function() {
console.log(++a, ++b);
};
}
var f1 = foo();
var f2 = foo();
f1(); // --> 1번
f1(); // --> 2번
f2(); // --> 3번
f2(); // --> 4번- a와 b의 값이 함수의 호출에 따라 어떻게 변화하는지 감이 안 잡혔다.
=> 클로저와 스코프 부분(koan sprint)공부를 다시 해봐야할 것 같다.
2-1
(advanced) 클로저의 유용한 예 : 현재 상태를 기억하고 변경된 최신 상태를 유지한다.
<!DOCTYPE html>
<html>
<body>
<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>
<script>
var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');
var toggle = (function () {
var isShow = false;
// TODO: ① 클로저를 반환하는 함수 작성
return function () {
// TODO: ③ isShow 변수의 상태를 변경하는 코드 작성
// isShow ? box.classList.remove('hide') : box.classList.add('hide');
box.setAttribute("class", isShow? "show" : "hidden")
// CSS 내용은 생략.
isShow = !isShow;
};
})();
// ② 이벤트 프로퍼티에 클로저 할당
toggleBtn.onclick = toggle;
</script>
</body>
</html>- 클로저 함수를 사용해서 isShow 변수의 변경된 최신 값을 저장한다.
- 그 당시에는 풀지 못했는데, 지금은 나름 풀어냈다. 코드 빈칸 넣기라 할 수 있었던 것 같기도 하다. 클로저 함수를 이용할 생각을 할 수 있었을까?
Every step to become a better version of me 🚶♂️ 블로그 이사중