React

1. 구조 분해 할당

리액트에서 userDisclousure 사용중

const { isOpenDrawer, onOpenDrawer, onCloseDrawer } = useDisclosure()

기본 값인 isOpen, onOpen, onClose 에서 값을 위와 같이 바꿨더니 갑자기 작동을 안함.

-> 구조 분해 할당을 정확히 적용해야 함

const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure();

• isOpen: isOpenDrawer는 isOpen 값을 isOpenDrawer라는 이름으로 재정의
• 같은 방식으로 onOpen과 onClose도 새로운 변수명으로 할당

객체의 구조 분해 할당

객체의 구조 분해 할당은 객체의 속성을 변수로 쉽게 추출할 수 있습니다.

const obj = { name: 'Alice', age: 25 };

// 객체의 속성을 변수에 할당
const { name, age } = obj;

console.log(name); // "Alice"
console.log(age);  // 25

const { name, age } = obj;는 객체 obj의 name 속성을 name 변수에, age 속성을 age 변수에 할당합니다.
객체의 구조 분해 할당은 속성 이름을 기준으로 이루어집니다. 즉, 객체의 속성 이름과 동일한 이름의 변수를 생성합니다.
객체에서 변수 이름을 바꾸기:
객체의 속성 이름과 다른 변수명을 사용하려면 :를 사용합니다.

const obj = { name: 'Alice', age: 25 };

// 변수명을 바꿔서 할당
const { name: userName, age: userAge } = obj;

console.log(userName); // "Alice"
console.log(userAge);  // 25

name: userName은 obj.name을 userName이라는 변수에 할당합니다.
이 방식으로 원하는 이름으로 변수명을 변경할 수 있습니다.

props 전달 시 구조분해 할당

• 부모 컴포넌트

<SignInPage onCloseDrawer={onCloseDrawer}/>

• 자식 컴포넌트

const SignInPage = ({onCloseDrawer}) => {
~
}

중괄호를 사용해 구조분해 할당을 하지 않을 시, onCloseDrawer를 제대로 받아오지 못해 TypeError 발생
React 컴포넌트에서 props를 전달받을 때 구조 분해 할당을 사용하면, 전달된 여러 props 중에서 필요한 값만 간편하게 추출할 수 있음

2. Export (Default, Named)

• default export 정의 : 해당 컴포넌트를 이름 없이 가져와야 함(이름을 같지 않게 설정해도 됨)
  import할 때 중괄호 {}를 사용하지 않아야 함
  모듈에서 하나의 기본 값을 내보낼 때 사용

  // SignInPage.js
  const SignInPage = () => {
    return <div>Sign In</div>;
  };
  
  export default SignInPage;

  // 사용 중인 파일에서
  import SignIn from './SignInPage';

• 명시적 export : 이름을 일치시켜 가져와야 함
  중괄호를 사용해야 함
  모듈에서 여러 값을 이름을 지정해서 내보낼 수 있음

  // SignInPage.js
  export const SignInPage = () => {
    return <div>Sign In</div>;
  };
  

  // 사용 중인 파일에서
  import { SignInPage } from './SignInPage';