6주 1일차 수업내용
--이번주에 배울것
결제는 라이브러리가 있지만 전체 프로세스를 알아야한다!
지동 연동해서 내위치 표시하기!
위와 같은내용을 알려면 자바스크립트에서 알아야하는 내용이 몇몇있다!
useState 의 대괄호 의 의미.. 뭘깜??
오늘에야말로 괄호의 의미를 알아보겠윰!
--오늘의 학습목표
const{}, const[] 원리!==>Destructuring
객체에서 데이터를 삭제해보자!!==> Rest-Parameter
Hos==>Custon-hooks
refetch 쉽지만 별로얌 ==> Cache-Modify
Destructuring
중괄호와 대괄호!
구조분해 할당(=비구조화할당)
const child = {
name : "철수",
age : 12,
school : "다람쥐초등학교"
}
를 표현하기위해서
const name = child.name
const age = child.age
const school = child.school 라고 길게 써야했다
구조분해할당(=비구조화할당)을 사용하면
const {name, age, school} = child 라고 짧게 표현 할 수 있다!
const {data,loaging}-useQueray(FETCH_BOARDS)
유즈쿼리라는 함수에 페치보드를 사용해서 리턴된 값이
객체인데 객체의 키값이 데이터/로딩인 벨류값을 가져온다!
const aaa useQueray(FETCH_BOARDS)
let data=aaa.data
let loading =aaa.loading
이었던것 이다!
cosnt classmates=['철수','영희',''훈이]
const child1=classmates[0]
const child2=classmates[1]
const child3=classmates[2]
...... 다섯개 있으면 다섯개써야해...?? 귀찮..그래서 나온게 구조분해할당
const [cild1,cild2,cild3]=classmates
유즈 스테이트함수를 실행하고 나서 리턴되는값이 배열인데, 그중 0번째 인덱스에있는걸 state 라는 값으로 빼줘..! 라는 것이었음!
cosnt [,setState]=useState("")
state를 안쓰더라도 콤마는 붙혔던이유가 이것임!!
원리를 이해하면 setCount를 이렇게도 쓸 수 있다!!
유즈스테이트는 배열을 리턴, 유즈쿼리는 객체를 리턴
객체는 들어가는 이름이 중요하지 순서는 전혀 중요하지 않다.
하지만
배열을 이름은 내맘대로지만 순서가 굉장히 중요! classmates의 0번째 인덱스를 빼와 이기 때문
Rest 파라미터
딜리트를 붙이면 된다!
하지만 이 방법은 좋은행위는 아니다!
자바에서 원본을 지우는건 좋지않음.. 어디서 쓰이고있는지 모르기 때문이다! 예상치 못한 에러가 나올 수 있음!
지우기는 하는데 원본은 건드리지 않고!
어떻게 할 수 있을까??
const {money,hobby, ...rest}=child
하면된다!!
그럼 머니랑 허비 빼고 나머지가 rest에 들어가게됨!
나눠서 할당!
rest.name하면 철수 나옴!
원본은 건드리지 않고 삭제된 객체를 요렇게 만들어낼 수 있다!
이름이 레스트가 아니었으면 좋겠으면?? 다른걸로 하면됨 ㅎㅎ(그냥 관례일 뿐임)
커스텀훅
커스텀훅이란것은 그냥 우리가 만드는 use로 시작하는 함수!
그럼 우리가 만든 일반적인 함수랑 use로 시작하게 만든 함수랑 무슨차이가 있나용??
사실 별차이 없어욤 ㅎ
보통 훅스를 사용하고 있는 함수를 만들때 useAAA 이런식으로 이름을 붙히고 커스텀훅이라고 하는것 뿐이다.함수안에서 유즈가 없다면 그냥 펑션이라고 부르는것
독스에서는 유즈를 안에서 쓰고있음면 함수에 유즈를 반드시 붙혀주세요 라고 하고있윰
use 안붙혔다고 해서 실행이 안되는것은아닌데 .. 해주는게 좋음
이에스린트가 잡아낸돳~~!!
서비스 규모가 커지다보면 예측하기 어려운 오류들이 발생하게되는데, 작은 관례들이 모여서 오류를 빨리 잡아낼 수 있게 해준다!
Cache-Modify
옛날방식으로 하면 입력 순서가 바뀌어선 안되지만
구조분해할당으로 (객체형태로) 받게되면 알맞은 키값에 따른 값만 들어가기 때문에 오류를 줄일 수 있다!
위처럼 이해하면 더 쉽다 ㅎㅎ
객체 구조분해할당은 순서가 중요하지 않은점을 이용한것~!
서버유지비용과 관리비용을 줄이기위해 리패치 대신 사용한당!
Author And Source
이 문제에 관하여(6주 1일차 수업내용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@iamm71kr/6주-1일차-수업내용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)