[TIL] 내일배움캠프 React 과정 2024.06.03

오늘의 한 일

• 알고리즘 심화반 수업
  • 반복문을 사용하여 삼각형 그리기
• 발라드 커뮤니티 웹 (팀 프로젝트)
  • 게시글 상세페이지 UI 제작
• 챌린지반 수업
  • Tanstack query

오늘의 배운 점

• useRef를 배열로 사용하는 방법
• 여러가지 input을 한 번에 관리할 때 용이하다.

사용예시

export default function ToastForm() {
  const inputRef = useRef([]);
  
    const onSubmitHandler = (e) => {
    e.preventDefault();
    const [title, content, time] = inputRef.current;
      
    toast.createToast({
      title: title.value,
      content: content.value,
      time: time.value,
    });
  };
  
  return(
   <form onSubmit={onSubmitHandler}>
      <ToastInput
        inputRef={(el) => (inputRef.current[0] = el)}
        id="title"
        label="제목 (필수)"
        defaultValue="Scheduled: Catch up"
      />
      <ToastInput
        inputRef={(el) => (inputRef.current[1] = el)}
        id="content"
        label="내용 (필수)"
        defaultValue={todayToString()}
      />
      <button>토스트 띄우기</button>
    </form>
  )

오늘의 회고