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

jce1407·2021년 3월 23일
1

TypeScript

목록 보기
2/4
post-thumbnail

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체킹도 해줘야함
profile
최고의 복지는 좋은 동료, 좋은 동료가 되기 :)

관심 있을 만한 포스트

0개의 댓글