인프런 커뮤니티 질문&답변

i1004gy님의 프로필 이미지

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

리렌더링 이해하기

styled-components 적용 질문

해결된 질문

23.06.08 22:00 작성

·

335

0

import React from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { Input, Menu, Row, Col } from "antd";
import { useState, UseMemo } from "react";
import UserProfile from "../components/UserProfile";
import LoginForm from "../components/LoginForm";
import styled from "styled-components";

const { Search } = Input;
const onSearch = (value) => console.log(value);
const SearchInput = styled(Input.Search)`
  verticalalign: middle;
  width: 200px;
  marginleft: 10px;
`;

const items = [
  {
    label: <Link href="/">노드버드</Link>,
    key: "mail",
  },
  {
    label: (
      <div>
        <Link href="/profile">프로필</Link>
        <SearchInput
          placeholder="input search text"
          enterButton="Search"
          onSearch={onSearch}
        />
      </div>
    ),

    key: "profile",
  },
  {
    label: <Link href="/signup">회원가입</Link>,
    key: "signup",
  },
];
let tmp = "mail";
const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [current, setCurrent] = useState(tmp);
  console.log(current);
  const onClick = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
    tmp = e.key;
  };
  return (
    <div>
      <Row>
        <Col span={12} offset={6}>
          <Menu
            mode="horizontal"
            onClick={onClick}
            selectedKeys={[current]}
            items={items}
          />
        </Col>
      </Row>

      <Row gutter={8}>
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a
            href="https://github.com/seroak"
            target="_blank"
            rel="noreferrer noopener"
          >
            Made by seooak
          </a>
        </Col>
      </Row>
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?

const SearchInput = styled(Input.Search)`
  verticalalign: middle;
  width: 200px;
  marginleft: 10px;
`;

const items = [
  {
    label: <Link href="/">노드버드</Link>,
    key: "mail",
  },
  {
    label: (
      <div>
        <Link href="/profile">프로필</Link>
        <SearchInput
          placeholder="input search text"
          enterButton="Search"
          onSearch={onSearch}
        />
      </div>
    ),

맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다

답변 2

0

i1004gy님의 프로필 이미지
i1004gy
질문자

2023. 06. 08. 23:53

아 그렇네요! 감사합니다 그런데 styled-components를 적용하고 맨 처음 랜더링 된후 좀 시간이 지나고 나서 style이 적용이 되는데 이건 개발 모드여서 생기는 현상인가요? 인라인으로 style을 적으면 바로 style이 적용이 됩니다

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2023. 06. 09. 00:10

ssr용 설정 따로 하셔야합니다. 강좌 배포 부분에 나옵니다

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2023. 06. 08. 23:33

css는

vertical-align

margin-left

입니다.

i1004gy님의 프로필 이미지

작성한 질문수

질문하기