코드캠프 부트캠프 25일차

개발일기·2022년 2월 17일
0

비구조화할당 (Destructuring)

ES6에 추가된 JS 표현식으로 배열이나 객체에서 특정 데이터를 변수로 추출해서 사용할 수 있게 해준다.
자주 사용하는 useState(), useQuery()또한 이러한 형식으로 이루어져있다는 것을 이번 시간을 통해 알게 되었다.
변수를 선언하고 해당 데이터들을 가져오기 위해서 useState()의 경우에는 []배열로 받아왔으며, useQuery()의 경우에는 {}data로 받아왔다.
객체를 비구조화할당을 할 경우 가져오고자 하는 값의 key를 입력해야 하며, 배열을 비구조화할당을 할 경우에는 순서에 맞게끔 입력을 해야 한다.
const {data} = useQuery()와 같이 useQuery()의 결과값 중 'data'라는 key값을 입력해야 원하는 데이터를 가져올 수 있으며, const [state, setState] = useState()의 경우에는 이름이 바뀌어도 되지만 순서를 반대로 입력하게 되면 의도한 값을 얻지 못하게 된다.
이러한 비구조화할당을 잘 활용한다면 코드를 짧게 리펙토링 하는데 있어서 매우 유용하게 사용될 것이다.

Rest-Parameter

객체에서 특정 값을 지우고 싶을때, delete를 사용할 수 있다. 하지만 delete를 사용한다면 원본의 값에도 영향을 주어 나중에 의도치 않은 결과를 얻을 수 있다. 따라서 원본에 영향을 주지 않게끔 수정을 하는것이 바람직하다.
이렇게 원본을 건들지 않고 값을 삭제하기 위해 rest-parameter를 스프레드연산자(...rest)를 사용한다.

ex> {지우려는값1, 지우려는값2, ...rest}를 사용한다면 지우려는값1,2를 제외한 새로운 rest라는 객체가 담기게되고 rest는 변수명으로 우리가 원하는 이름으로 설정할 수 있다.

Custom-hooks

Hook이란 함수형 컴포넌트에서 사용되는 state 기술들의 모음이라 할 수 있다. useEffect(), useRef() 등 use로 시작하는 hook들을 우리가 직접 만들어서 사용하는 것을 Custom-hook이라고 한다.
Custom-hook들의 대표적인 예로는 해당 컴포넌트를 실행하기 전에 먼저 실행시켜 우리의 조건에 부합하는지(로그인이 되어있는지) 검증해주는 함수를 컴포넌트로 만들어주고 이렇게 만든 컴포넌트를 실행하고자 하는 컴포넌트에 적용시키면 함수가 먼저 실행되어 검증을 할 수 있게 된다.
또한 페이지 이동을 관리할 수 있는 Hook도 있다. 기존의 페이지 이동 기능 구현과 큰 차이는 없지만, 해당 기능을 Hook으로 따로 관리한다면 코드가 간결해지고 유동적으로 사용이 가능해지며, 유지보수가 용이해진다. 예를들어 페이지 이동 함수를 컴포넌트로 만들고 함수에 전에 있었던 페이지를 state값으로 저장을 해놓는다면 로그인이 필요한 페이지에서 로그인을 하고나서 로그인버튼에 이전페이지가 들어가있는 state를 저장해놓음으로써 로그인 후 전에 있던 페이지로 바로 이동을 시켜주는, 조금 더 유연한 서비스를 제공할 수 있게 된다.

profile
개발자가 꿈이에오

0개의 댓글