구조분해할당(Destructuring)

구조분해할당

객체의 구조분해 할당

객체의 구조분해할당시에는 순서는 중요하지 않지만 이름이 중요하다! (key값이 중요)

const profile = {
    name : "철수",
    age : 12,
    school : "다람쥐초등학교"
    
}
const {name, age, school} = profile
name
// "철수"
age
// 12
school
// "다람쥐초등학교"
const { school, name, age } = profile
// 이렇게 작성해도 무관함..

배열의 구조분해 할당

배열의 구조분해할당시에는 순서가 매우 중요하고, key는 중요하지 않다!

const classmates = ["철수", "영희", "훈이"]
undefined
const [ child1, child2, child3 ] = classmates
child1
// '철수'
child2
// '영희'
child3
// '훈이'

const [ child2, child3] = classmates
// 이렇게 하게 되면 child2에 철수, child3에 영희가 담기게 된다.

---

나만의 useQuery 만들기

function useQuery(qqq){

    // qqq API 요청하기
    
    return {
        data : { fetchBoard : {writer : "철수" }} ,
        refetch : () => {
            console.log("refetch가 실행됩니다!")
        }
    }
    
}

const { data, refetch}  = useQuery("FETCH_BOARDS")

data.fetchBoard.writer
// '철수'
refetch()
// refetch가 실행됩니다!


const aaa = useQuery("FETCH_BOARDS")

aaa.data.fetchBoard.writer
// '철수'
aaa.refetch()
// refetch가 실행됩니다!

나만의 useState 만들기

function useState(qqq) {
    
    const myState = qqq

    const mySetState = () => {
        console.log("state를 변경합니다!")
    }
    
    return [ myState, mySetState ] 
}

const [count, setCount] = useState(0)

count
// 0
setCount()
// state를 변경합니다!

function useState(qqq) {
    
    const myState = qqq

    const mySetState = (value) => {
        myState = value;
        console.log(`state를 ${value}로 변경합니다!`)
    }
    
    return [ myState, mySetState ] 
}

const zzz = useState(0);
zzz[0]
// 0 
zzz[1](5)
// state를 5로 변경합니다!

REST 파라미터

특정 객체에서 지우고 싶은 데이터가 있을 때 어떻게 할까?

❌ delete를 통해 원본을 건드리는 일은 바람직하지 못하다!
→ 원본 데이터가 어디서 사용되고 있을 지 모르기 때문에

원본을 건드리지 않고 삭제 하기 위해서 rest 파라미터를 이용한다!

이렇게 사용하면, rest부분에는 money와 hobby를 제외한 모든게 들어가게 된다.