React 스타일링 2

props 설정하기
자식 속성에 defaultProps값을 설정해서 위에서 넘겨주지 않을 시 값을 어떻게 설정할지 정할 수 있다.

연결되는 다른 div의 글자 하나가 위로 떠있을 때?
align-items: flex-end (center 중앙정렬)

금액 표기법
.toLocaleString

요소를 위에서 아래로 쌓을 때 제일 마지막 요소를 제일 아래에 두고 싶다면
margin-top:auto (padding으로 내부 위치 적절히 조절)

 

요소 다루기

포지션이 absolute인 것은 부모의 포지션이 명시된 것을 기반으로 함

 

styled-components의 css 기능

large props를 전달받는 것의 유무에 따라 크기가 달라지게 하기

import styled, { css } from "styled-components";
export const Container = styled.div`
  width: 296px;
  height: 407px;
  ${(props) =>  props.large && css`
      width: 398px;
      height: 409px;
    `}
`;
// <Card.Container large>로 보낸다

선택자의 우선순위

const Button = styled.button`
  // 생략

  + button {
    margin-left: 4px;
  } // 우선순위 높음

  ${(props) => props.active && css`
      color: #f9fafc;
      background: #524fa1;
      border-radius: 4px;
    `}
`;

const ArrowWrapper = styled.button`
  margin: ${(props) => (props.flip ? "0 0 0 15px !important" : "0 15px 0 0")};
  // flip 여부에 따른 설정 다르게
  // !important는 CSS 우선순위를 강제로 설정, 위의 margin-left 값 적용 안되게
  ${(props) => props.flip && css` transform: scaleX(-1);`} // 뒤집기
  svg { display: block; }
`;

색깔을 변수로 지정 후 대입

const normalButtonColor = "#6a5acd";
const hoveredButtonColor = "#8f7cee";
const activedButtonColor = "#c1aeee";

export default function InputForm() {
  return <Button>Submit</Button>
}

const Button = styled.button`
  width: 295px;
  height: 60px;
  color: white;
  
  border: none;
  background-color: ${normalButtonColor};
  cursor: pointer;

  :hover { /* 마우스가 위치 */
    background-color: ${hoveredButtonColor} }
  :active { /* 버튼 클릭 */
    background-color: ${activedButtonColor} }
`;

---

+ debouncing

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => { // 디바운스 함수가 호출될 때 전달된 인수
    clearTimeout(timer); // 이전 설정된 타이머를 취소 & 새로운 입력이 들어오면 타이머 재설정
    timer = setTimeout(() => { // setTimeout() 함수로 설정된 디바운스 대기 시간 추적
      func.apply(this, args);
    }, timeout);
  };
}
export default function SearchTextField({ value, onChange }) {
  const debouncedOnChange = debounce(onChange, 500) // props로 setState 들어감
  return (
    <Container>
      <MagnifyingGlass />
      <Input placeholder="배우고 싶은 언어, 기술을 검색해 보세요."
        onChange={(e) => debouncedOnChange(e.target.value)} />
    </Container>
  );
}

 

clearTimeout: setTimeout 함수에 의해 반환된 타이머 식별자를 인수로 받음 / 타이머 식별자를 사용하여 해당 타이머 취소

 

apply: JavaScript의 내장 메소드로, 함수를 호출하는 역할
this: 함수가 실행될 때 사용될 this 값 (현재 컨텍스트)

args: 함수에 전달될 인수를 배열 형태로 제공

const debouncedFunc = debounce(myFunction, 500);
debouncedFunc('arg1', 'arg2');

 

이 경우 args 값은 ['arg1', 'arg2']

그리고 func.apply(this, args) 구문을 통해 myFunction('arg1', 'arg2')가 호출

 

 

#코딩독학 #코딩인강 #코딩배우기 #개발자 #코딩이란 #코딩교육
#프론트엔드부트캠프 #백엔드부트캠프 #국비지원부트캠프 #개발자 #백엔드 #AI부트캠프 #개발자국비지원 #백엔드개발자 #프론트엔드개발자