Next.js - typescript tip

1.

// pages/index.tsx

import {NextPage} from "next";

const index: NextPage = () => {
	return <div>hello</div>;  
};

export default index;

NextPage: pages 폴더에서 사용하는 컴포넌트 타입. NextPage는 리액트 컴포넌트의 확장으로, getInitialProps라는 함수를 갖고 있음.

---

 

2. styled-component 에서의 타입 지정

https://velog.io/@hwang-eunji/styled-component-typescript

Styled-component #3 with typescript

 2-1) 단일 props 사용 시

• styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다.
• 컴포넌트에 타입지정할때는 styled.div<인터페이스명> 와 같이 사용한다.

• // styled-components에 1개 props 타입지정
  // const Container = styled.div< {프롭스명 : 타입지정} >`
  const Container = styled.div< { age : number } >`
    color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  `;

 

 

 2-2) 다수 props 사용 시: interface 작성

// Container styled-components에 적용할 interfacer를 작성
interface Container extends 상속타입 {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}
// styled-components에 interface 타입 지정하기
const Container = styled.div<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;

 

 2-3) 상속 컴포넌트에 타입지정

// 상속컴포넌트의 타입 상속받기
interface Container {
  isActive: boolean;
  age: number;
  프롭스명: 타입지정;
}

// 상속받은 컴포넌트에 타입 추가하기
const Container = styled(상속받을 컴포넌트명)<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
  // or
  background-color: ${({isActive}) => (isActive ? 'red' : 'gray')};
`;

 

2-4) style-component 내에서도 네스팅이 가능

import React from "react";
import styled from "styled-components";
import { NextPage } from "next";

const Container = styled.div<{ iconExist: boolean }>`
  input {
    position: relative;
    width: 100%;
  }
`;

const index: NextPage = () => {
  return (
    <Container iconExist={true}>
      Hello world
      <input />
    </Container>
  );
};

export default index;

컴포넌트를 보면 Container 아래에 input이 있는데, style을 나누어서 따로따로 커스텀하지 않아도 Container 내에서 input을 입력할 경우 상속이 가능하다.

---

3. JSX 타입 지정

let Box :JSX.Element = <div></div>
let Button :JSX.Element = <button></button>

 

4. Fucntion Component 타입 지정

function App () {
  return (
    <div>안녕하세요</div>
  )
}

...

type AppProps = {
  name: string;
}; 

function App (props: AppProps) :JSX.Element {
  return (
    <div>{message}</div>
  )
}

import React from "react";

interface IProps {
  name: string;
  job?: string;
  setcounter: (x: number) => void;
}

function Greeting({ name, job, setcounter }: IProps) {
  const onClick = () => {
    setcounter(0);
  };

  return (
    <>
      <div>
        hello {name} {job}
      </div>
      <button onClick={onClick}>초기화</button>
    </>
  );
}

export default Greeting;

 

 

5. state type 지정

 const [user, setUser] = useState<string | null>('kim');

 

6. 

interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
  icon?: JSX.Element;
}

input 태그가 가지는 속성들에 대한 타입

 

const onChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
  setEmail(event.target.value);
}

event 태그가 가지는 속성들에 대한 타입

 

7. PayloadAction

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

//* 초기 상태
const initialState: { authMode: "signup" | "login" } = {
  authMode: "signup",
};

const auth = createSlice({
  name: "auth",
  initialState,
  reducers: {
    //* 인증 팝업 변경하기
    setAuthMode(state, action: PayloadAction<"signup" | "login">) {
      state.authMode = action.payload;
    },
  },
});

export const authActions = { ...auth.actions };

export default auth;