[TIL] 211122

styled-components

-globalStyle & reset

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  @import url('');
  /* https://meyerweb.com/eric/tools/css/reset/ 복사! */
  /* 원하는 전역 스타일 추가 */
  body {
    font-family: sans-serif;
    background-color: black;
  }
`

function App() {
  return (
    <>
      <GlobalStyle />
      <Component />
      ...
    </>
  );
}

-a 태그를 block으로 모든 너비를 차지하게!

const Title = styled.div`
  ...
  /* Link = a */
  a {
    display: block;
  }
`;

function App() {
  return (
    <Title>
      <Link to='/'>name</Link>
    </Title>
  );
}

Typescript

-interface data는 외부 API를 가져올 때에도 작성. 우리의 object가 어떻게 생겼는지 타입스크립트에게 설명

interface UserInterface {
  id: number;
  name: string;
  age: number;
  hobby?: string; // optional properties
};

function Users() {
  const [users, setUsers] = useState<UserInterface[]>([]);
  
  useEffect(() => {
    // IIFE
    (async() => {
      const res = await fetch('api url');
      ...
    })();
  }, []);
  
    
  return (
    <UserList> 
      {users.map((user) => (
        <User key={user.id}>
          <span>{user.name}</span>
          ...
        </User>
      ))}
    </UserList>
  );
}

React Router

-Link를 통해 다른 component에 정보 보내기

function Users() {
  ...
  return (
    <Container>
      {users.map(user => (
        <User key={uesr.id}>
          <Link
            to={{
              pathname: `/${user.id}`,
              state: { name: user.name },
            }}
            {user.name}
          </Link>
        ))}
      </User>
    </Container>
  );
}

// router.js
function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Users} />
        <Route exact path="/:userId" component={User} />
      </Switch>
    </BrowserRouter>
  );
}

// User.js
import { useLocation, useParams } from 'react-router';

function User() {
  const { userId } = useParams();
  const { state } = useLocation();

  return (
    <Container>
      <Header>
        <Title>{state?.name || 'Loading'}</Title>
      </Header>
    </Container>
  );
}