[React] 소소한 깨달음과 팁 정리 (with. TypeScript)

 

 

 

글 하나로 적긴 애매하지만 모아두면 소소한 깨달음의 정리...

계속 추가 될 예정....🚂

 

 

---

 

 

1. 함수를 넣으면 렌더링 시점에서 함수가 호출되므로 함수형태로 넣어준다.

// 이렇게 함수형태로 작성해준다.
<Button
  type="button"
  onClick={handleClickButton}
/>

// 이렇게 적으면 렌더링 시점에 실행된다.
<Button
  type="button"
  onClick={handleClickButton()}
/>

 

 

 

2. 값은 이렇게도 담긴다.

import SwiperCore, {Navigation} from "swiper";

const [swiper, setSwiper] = useState<SwiperCore>();

 

 

 

3. 기본값을 지정하는 방법은 2가지

- 첫번째 방법: defaultProps를 사용한다.

UserInfo.defaultProps = {
  name: 'empty',
  age: 0,
};

 

- 두번째 방법: 매개변수에서 지정해준다.

function UserInfo({
    name = 'empty', 
    age = 0,
}): Props {
    // ...
}

// 이 경우 해당 값이 optional하다고 지정해줘야 한다.
interface Props {
    name?: string,
    age?: number
}

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.