오늘 배운것들 정리

💡 0부터 원하는 숫자까지 모든 수를 요소로 갖는 배열 만들기

 

// Array.from()으로 길이가 10, 값이 (0~9)인 배열 생성
const arr = Array.from({length: 10}, (val, idx) => idx);

console.log(arr);         // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr.length);  // 10

 

불러온 데이터의 인덱스를 가진 배열을 한번에 생성 or 삭제해야하는 이벤트가 있었는데

이 때 이 방법을 유용하게 썼다. 더 좋은 방법이 있을 수도 ..?!!

 

---

💡 checkbox 타입의 input 태그는 'checked' 속성을 갖는다

 

<label><input type="checkbox" /> 체크 X </label>
<label><input type="checkbox" checked /> 체크 O </label>

 

리액트에서 useRef 훅으로 체크박스를 관리해야하나 .. 고민했었는데

checked 타입이 있다는 걸 알고 checked = { 조건 ? true : false } 으로 로직을 작성했다.

 

---

💡 클라이언트 단에서 이미지를 로드해야할 때 (ex.localhost:3000) 사용하는 간단한 방법

 

<img alt="png01" src="img/01.png" />

 

나는 왜 여태 보조 서버를 열어서 (ex.localhost:5000) 이미지를 로드해왔는가 ...

서버가 없을 땐 그냥 (리액트 기준) public 폴더 내부에

img 폴더 만들어서 이미지 넣어놓으면 이렇게 쉽게 불러올 수 있다 !!

 

---

💡 Typescript 에서 styled-component (커스텀) props 내려주기

 

import styled, { css } from 'styled-components';

interface PropsType {
  isSelected: boolean;
}

const SelectBox = styled.input<PropsType>`
  opacity: 0%;
  background-color: #000;
  // 방법 01
  ${(props) => 
    props.isSelected 
      ? css`
        opacity: 100%;
      `
      : css``
  }
  // 방법 02
  ${(props) =>
    props.isSelected && `
      opacity: 100%;
    `
  }
`

function BasicForm(){
  return (
    <SelectBox type="checkbox" isSelected={ 조건 ? true : false }/>
  );    
}

 

HTML 태그에 원하는 속성값이 없다면,

혹은 CSS에서 관리하고 싶은 커스텀 속성이 필요하다면,

이렇게 인터페이스를 정의해서 사용하면 된다 !-! 타입스크립트로 작성할 때 좋다 😊

 

---

💡 styled-component 에서 hover 속성 문법 (자꾸 까먹어서 추가)

 

import styled from 'styled-components';

const Button = styled.button`
  border: none;
  &:hover{
    color: blue;
  }
`

 

styled-component 랑 hover 속성 조합 아주 유용 ... 👍👍

 

---

💡 타입스크립트 환경에서 npm 모듈 설치할 때 명령문 주의

 

npm install @types/[모듈 이름] --save-dev

 

자꾸 npm install [모듈 이름] 시도하는 내 손 멈춰 😨

---