22.10.26 TIL

1. Done

---

1.1 포폴앱 성능최적화 계획잡기

별도 문서로 정리: https://handsome-parcel-51e.notion.site/1-1044e2798c5f49838dd87e39eb2640cc

2. 타입스크립트 - ref로 사용자 입력 받기 (state 양방향 바인딩 안 쓰는 경우)

const todoOnSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

event 객체의 타입은 react.FormEvent 이다.

useRef

1. useRef 호출
2. ref 타입 할당 (HTMLInputElement)
3. 초기값 null 할당 (useRef()가 jsx 리턴문보다 위에 있어 최초 렌더링 시 아직 jsx가 렌더링 되지 않았으므로)
4. reference 값을 DOM 요소에 적용
5. 이벤트 핸들러 정의

import React, { useRef } from 'react';

const AddTodo: React.FC = () => {
  const textInputRef = useRef<HTMLInputElement>(null);

  const todoOnSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const enteredText = textInputRef.current!.value;
  };

  return (
    <form onSubmit={todoOnSubmit}>
      <div>
        <label htmlFor="todo-text">
          <input type="text" id="todo-text" ref={textInputRef} />
        </label>
      </div>
      <button type="submit">할 일 추가</button>
    </form>
  );
};

export default AddTodo;

3. 타입스크립트 - useState 사용하기

제네릭 사용하기

1. 별도 파일에 state의 인터페이스 정의
2. useState 호출하면서 제네릭으로 타입을 넘겨주기

// todo.model.ts
export interface Todo {
  id: string;
  text: string;
}

// App.tsx
import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';
import { Todo } from './todo.model';

const App: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const todoAddHandler = (text: string) => {
    setTodos(prev => [...todos, { id: Math.random().toString(), text }]);
  };

  return (
    <div className="App">
      <AddTodo onAddTodo={todoAddHandler} />
      <TodoList items={todos} />
    </div>
  );
};

export default App;