20220217_TIL : 구조분해할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.

키값에 대한 데이터를 각각 가져오고 싶을때 child.name 으로 쓰지않아도
구조 분해 할당으로 한번에 가져올 수 있다.

const child = {
	name : "철수",
  	age : 13,
  	school : '다람쥐 초등학교'
}

const {name, age, school} = child
console.log(name) // '철수'

데이터를 각각 조회할 수도 있지만 많은 양의 데이터를 가져올 경우 훨씬 효율적이다. 데이터를 주고받을 때도 익숙하게 사용한 useQuery / useState도 이런 원리이다.

function useState(){
	// 변수를 만드는 함수식
    return [ 데이터, 데이터를 바꿔주는 함수 ]
}

// 구조분해할당 표현식
const [state, setState] = useState()
console.log(state) // 데이터

⚡️ TIP !
객체의 구조분해할당의 경우 키값이 정해져있기때문에 불러올 때
const {키} = 객체명 으로 불러오지만
배열의 경우 키값이 따로 없기 때문에 설정하는 변수명에 상관없이 데이터를 불러오는 순서가 중요하다.

💡 Custom-Hooks

useState, useContext, useEffect, useRef 등 다양한 react 내장 Hook으로 함수형 컴포넌트에서 state와 LifeCycle 관리가 가능했던 것처럼 코드 작성 시 공통적으로 적용되는 기능을 hook으로 만들어 코드를 간결하게 작성할 수 있다.

export function useMoveToPage() {
  const router = useRouter();

  //HOF 방식을 이용한 hook 
  const moveToPage = (page) => () => {
    router.push(page);
  };
  return { moveToPage };
}

//페이지마다 router 작성할 필요 없이 import useMoveToPage
const { moveToPage } = useMoveToPage();
  return (
    <div>
      <div>커스텀 훅 연습 - 페이지 이동</div>
      <button onClick={moveToPage("/board")}>게시판으로 이동</button>
      <button onClick={moveToPage("/market")}>마켓으로 이동</button>
      <button onClick={moveToPage("/mypage")}>마이페이지로 이동</button>
    </div>
  );

👩🏻‍💻 오늘의 TIL ...

어제 오늘 코드를 훨씬 깔끔하게 작성하는 여러 방법을 배웠다. 지금부터 짜는 코드에는 이제까지 배운 부분을 최대한 활용하자. 프로젝트가 많이 밀렸다 하나씩 완성하자....

✔️ 중고마켓 컨셉 + 기능 완성 + CSS