리액트 폼, 스택, 사이드 이팩트

하비·2024년 2월 1일

학습 주제

1. Stack 컴포넌트 (레이아웃)

<Stack vertical> 수직 방향 정렬 gap margin style 도 설정 가능(기본 설정은 수평)

스택은 사용자 설정의 스타일이 많이 들어가기 때문에 customClassName 설정을 만들어 준다.

export default function Stack({
  as: Component = 'div', 
  className: customClassNames,
  ...restProps
}) {
  const classNames = `${classes.Stack} ${customClassNames}`.trim();
  return <Component className={classNames} {...restProps} />;
}

<Stack> 에 vertical을 줄 경우
Warning: Received 'true' for a non-boolean attribute 'vertical' 에러가 뜬다.
이걸 없애려면 <Stack>의 vertical의 boolean 값을 정해줘야 함.

css에 변수로 준 스타일의 경우 유저가 스타일 값을 조정할 수 있다.

export default function Stack({
  as: Component = 'div',
  className: customClassNames,
  vertical = false,
  gap,
  my: marginBlock,
  mx: marginInline,
  style: customStyles,
  ...restProps
}) {
  const componentClassNames = `${classes.Stack} ${customClassNames}`.trim();
  let developerStyles = {};
  if (gap || gap === 0) {
    developerStyles['--gap'] = `${gap}px`;
  }
  if (marginBlock || marginBlock === 0) {
    developerStyles['--my'] = `${marginBlock}px`;
  }
  if (marginInline || marginInline === 0) {
    developerStyles['--mx'] = `${marginInline}px`;
  }
  const componentStyle = {
    '--direction': vertical ? 'column' : 'row',
    ...developerStyles,
    ...customStyles,
  };
  return (
    <Component
      className={componentClassNames}
      style={componentStyle}
      {...restProps}
    />
  );
}

2. 폼(Form) 컨트롤

피자 주문 폼 (멀티 체크박스)

의문... 왜 toppings 가 계속 초기화 되나?
setOrderState를 설정해줬어야 했는데 하지 않음
의문... 중괄호 안에 element 선언과 태그로 선언되는 것의 차이
filter로 된 식이라서 가능한 것

폼 과제 연습 중 문제가 생겼다...

form 안에 input 컴포넌트를 넣어서 작업 했는데, form data를 뽑을 때 컴포넌트 안에 있는 data 요소를 뽑아올 수가 없다...
생각해보니 오늘 선생님이 가르쳐 주시려다가 안 배운 부분이라고 하고 넘어가셨던 건데 그냥 가르쳐 달라고 할걸...

리액트의 흐름

현재 DOM에서는 checked값이 true지만 리액트에서는 false로 뜸. 이유는 리액트는 전의 상태를 반영하기 때문.

3. 실시간 검색 폼 (리액트 제어 방식)

search는 자바 스크립트로 꽤 복잡하게 구현 했었는데 react를 사용하니 너무 간편해서 놀랐다.
의문: 왜 value 값에 query를 넣었는데 object가 뜨는가?
이유를 알았다..useState()에 ''값이 아닌 객체를 넣었기 때문

useState로 입력한 검색어를 업데이트 하고, 검색어를 갖고 있는 단어들을 filter로 리-렌더링 한다. 여기서 중요했던 것은 debounce 기능을 사용한 것.

입력할 때마다 리-렌더링이 되면 기능적인 저하가 발생하기 때문에(profiler에서 확인 가능)debounce를 주는 것이 좋다. debounce를 줄 경우 비동기적으로 함수가 실행되기 때문에 value가 아닌 defaultValue를 줘야 함.debounce(콜백함수) 가 들어간다.