7일차 / map,filter

6일차 코드리뷰

조건을 참으로 바꾸는 방법이 하나 더 있다.
"" 값은 false이고, 초기값으로 ""가 설정되어 있으므로 !== 를 생략할 수 있다.

    if (event.target.value !== "" && password !== "" && title !== "" && contents !== "") 
    = if(event.target.value && password && title && contents)

---

map vs filter

map

배열 classmates에 어린이를 붙일 때, for문을 이용했지만 map을 사용할 수도 있다.

const classmates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))

=>  ['철수어린이', '영희어린이', '훈이어린이']

포인트는 실행된 후 원래의 배열 자리로 돌아간다는 것이다.

const classmates2 = [
	{ name: "철수" }, 
    { name: "영희" },
    { name: "훈이"}
]

classmates2.map((el) => ({name: el.name + "어린이"}))

=> 
 {name: '철수어린이'}
 {name: '영희어린이'}
 {name: '훈이어린이'}

객체에도 적용할 수 있다.

const classmates = [
	{ name: "철수" , age: 13 },
	{ name: "영희" , age: 10 },
    { name: "훈이" , age: 11 }
]


classmates.map ((el) => ({ name:el, age:el, school : "토끼초등학교" }))

각 객체에 요소를 추가할 수 있다.

하나의 함수는 하나의 기능

함수명은 동사로 시작하고, 변수명은 명사로 하는 게 일반적이다.

function add(){
    const a = 1
    const b = 2

    console.log(a+b)
}

add()

function add2(aaa, bbb) {
    console.log(aaa + bbb)
}

add2(1, 2)

add2(5, 10)

function multi(zzz, qqq){
    console.log(zzz * qqq)
}
undefined
multi(2, 4)

function add3(aaa, bbb) {
    return aaa + bbb
}

const result1 = add3(2, 3)

function multi3(zzz, qqq){
    return zzz * qqq
}

const result2 = multi3(2, 4)

result1
5
result2
8
function multi3(zzz, qqq){
    return
}

화살표함수는 중괄호와 리턴을 생략할 수 있고 소괄호조차도 생략이 가능하다.

const add = (aaa, bbb) => {
    return aaa + bbb
}

add(1, 2)
=> 3

const add2 = (aaa, bbb) => (aaa + bbb)
= const add3 = (aaa, bbb) => aaa + bbb

생략된 소괄호의 aaa = bbb는 return을 의미한다.

const classmates= [
    { name: "철수" },
    { name: "영희" },
    { name: "훈이" }
]

classmates.map((el) => { name: el.name + "어린이" })
 [undefined, undefined, undefined]

map을 사용할 때 객체를 감싸고 있는 소괄호는 생략 불가능하다.

state가 바뀌면 리렌더링이 되는데, use로 만들어진 애들은 새로 만들어지지 않는다.
함수형 컴포넌트를 사용할 수 있는 이유가 use로 만들어진 애들 때문이다.

Fragment key={}는 가능하나 Fragment없이 key 단독 사용은 불가능하다.