타입스크립트 찍먹해보기2

Velopert 선생님의 강의를 보고 만든것 입니다!

보고 쓴 코드들

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
  onClick: (name: string) => void;
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
  const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {name} {mark}
      {optional && <p>{optional}</p>}
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </div>
  );
}

Greetings.defaultProps = {
  mark: "!",
};

export default Greetings;


import React from "react";
import Greetings from "./Greetings";

function App() {
  const onClick = (name: string) => {
    console.log(`${name} hello `);
  };
  return <Greetings name="Hello" onClick={onClick} />;
}

export default App;

리액트 src디렉터리 초기 셋팅

useState를 쓸때

useState에선 자동으로 타입을 알아내줘서 제네릭을 쓸필요가 없습니다,
그러나 null인지 판별해야하는 상황에서는 아래처럼 유용하게 쓰일수있어요

interface Information {
    name: string;
    description: string;
  }
  const [info, setInformation] = useState<Information | null>(null);

또 상태의 타입이 복잡한 배열이나 객체일때도 사용하는것이 좋습니다.

interface Todo {
      id: Number;
      text: String;
      done: Boolean;
  };
  const [todos, setTodos] = useState<Todo[]>([]); // 또는 const [todos, setTodos] = useState([] as Todos[]);

위의 주석에서 쓰인 as는 특정값이 어떤 타입이다를 명시할수있는 문법입니다!

useState를 쓸때 2

이번에는 input창을 이용해 상태관리를 하는걸 해보았습니다.

• useState를 써서 객체 상태 지정 / 분해할당으로 값 가져오기

const [form, setForm] = useState({
        name: '',
        desc: ''
    });
const { name, desc } = form;

• onChange 함수를 써서 특정 이벤트 타입지정해주기

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const {name, value } = e.target;
        setForm({
            ...form, [name]: value, 
        });
    };

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        onSubmit(form);
        setForm({
            name: '',
            desc: '',
        }); // 초기화
    };

useRef를 쓸때

useRef는 리액트 컴포넌트에서 외부라이브러리의 인스턴스 또는 DOM을 특정 값에 담을때 써요.
그리고 이것을 통해 컴포넌트 안의 값을 관리할때 유용해요, BUT 렌더링과 관계없어야함

	const inputRef = useRef<HTMLInputElement>(null)

위와 같이 useRef 를 쓰고 뒤에 제네릭을 붙여야함 사용시에는 .current 를 써서 정해준 기본값에서 변화를 줄 수있습니다.

기억에 남는 것

• React.FC는 쓰지말고 되도록이면 function 아니면 화살표 함수를 쓰자
• 특정 이벤트에 마우스 호버하면 그 이벤트 상세이름이 뜸
• useReducer쓸때는 타입들을 모두 |를 써서 명시해줘야함
• useRef를 쓸때는 제네릭으로 타입을 정해야함
• useRef로 DOM을 관리할때는 초기값으로 null을 주고 null체킹도 해줘야함