• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

display flex 및 link가 제대로 작동 안합니다...ㅠ

24.04.12 17:59 작성 조회수 99

0

안녕하세요! 두 가지 질문이 있어서 글 남깁니다.

 

  1. display flex가 특정 id에 적용이 안됩니다 ㅠㅠ

app.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다.

 

app.js 코드

import logo from './logo.svg';
import './App.css';
import MainPageComponent from "./main/index.js"
import React, { Component }  from 'react';
import {Link, Switch, Route, useHistory} from 'react-router-dom'
import UploadPage from './upload/index.js';
import ProductPage from './product/index.js';
import { Button } from 'antd';
import {DownloadOutlined} from '@ant-design/icons'

function App() {
  const history = useHistory();
  return (
    <div>
      <div id="header">
        <div id="header-area">
              <Link to="/">
                <img src="/images/icons/logo.png" />
              </Link>
              <Button size="large" onClick={function(){
                history.push('/upload');
              }} icon={<DownloadOutlined />}
              >
                상품 업로드
              </Button>
          </div>
      </div>
      <div id="body">
      <Switch>
        <Route exact={true} path="/">
          <MainPageComponent />
        </Route>
        <Route exact={true} path="/products/:id">
          <ProductPage />
        </Route>
        <Route exact={true} path="/upload">
          <UploadPage />
        </Route>
      </Switch>
      </div>
      <div id="footer"></div>
    </div>
  );
}

export default App;

 

app.css

* {
  margin: 0;
  padding: 0;
  line-height: normal;
}

html, 
body, 
#root, 
#root > div {
  height: 100%;
};

#header {
  height: 64px;
  /*가운데 정렬하는 방법*/
  display: flex;
  justify-content: center;
  border-bottom: 1px solid gray;
}

#header-area {
  width: 1024px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header-area img {
  width: 128px;
  height: 36px;
}

#body {
  height: 100vh;
  width: 1024px;
  margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/
  padding: 24px;
}

#footer {
  height: 200px;
  background-color: rgb(230,230,230);
}

이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요)

 

 

  1. Link 제대로 작동 안됨

Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...?

 

감사합니다!

 

답변 2

·

답변을 작성해보세요.

0

안녕하세요!

1번의 경우 코드 자체만 봤을 때는 문제가 없어보이는데요. 혹시 header123 이런식으로 id를 바꿔도 동일하게 문제가 발생할까요?

2번은 상세 코드를 보여주셔야 확인이 가능할 것 같습니다! 추가로 react-router-dom에 대한 기본 설정들이 잘 되었는지 확인해 보셔도 좋을 것 같아요!

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.04.14

안녕하세요, 인프런 AI 인턴입니다.

문의하신 내용에 대해 답변드리겠습니다.

  1. display flex 적용 문제

제공하신 코드와 설명을 바탕으로 보았을 때, display flex 적용이 안 되는 문제의 주요 원인은 CSS 코드에서 잘못된 부분이 없어 보입니다. 문제가 되는 부분은 다른 곳에서 발생할 가능성이 높습니다. 예를 들어, 다른 CSS 파일에서 #header에 대한 스타일이 덮어쓰이거나, HTML 구조상의 문제로 인해 스타일이 예상과 다르게 적용되는 경우가 있을 수 있습니다. 또한, 브라우저의 캐시로 인해 최신의 CSS가 반영되지 않는 경우도 있으므로, 캐시를 비우고 다시 시도해 보시기 바랍니다.

  1. React Router의 Link 태그 작동 문제

React Router를 사용할 때 Link 컴포넌트를 통해 페이지 이동을 구현하는 경우, 페이지가 자동으로 리로드 되지 않고 URL만 변경되는 문제가 발생할 수 있습니다. 이 문제는 대부분의 경우, <Route> 컴포넌트의 설정이나 React Router의 버전 및 설정 문제로 발생할 수 있습니다. 제공된 코드 내에서 명확한 오류를 찾기는 어렵지만, <Switch><Route> 컴포넌트의 사용 방법은 올바른 것으로 보입니다. 문제 해결을 위해 다음 사항을 확인해 보시기 바랍니다.

  • react-router-dom의 버전이 최신인지 확인하고, 필요하다면 업데이트해 보세요.
  • <Route> 컴포넌트에 정의한 경로와 Link 컴포넌트에서 사용한 to 프로퍼티 값이 정확히 일치하는지 확인해 보세요.
  • 페이지 전환 시 페이지 내용이 갱신되지 않는 경우, useHistory Hook을 사용하는 대신 <Link> 컴포넌트만으로 페이지 전환이 이루어지도록 구조를 간소화해 보는 것도 좋은 방법입니다.

위의 사항들을 확인하시고도 문제가 해결되지 않는다면, React Router의 설정이나 다른 상위 컴포넌트의 영향을 받을 수 있으므로 전체적인 코드 구조를 다시 검토해 보시는 것을 권장드립니다.

The image appears to be a screenshot from a Korean website. The top part of the image features a header with Korean text that seems to be announcing some sort of event or special deal, but without the text being fully visible, the precise nature of the event is unclear.Below the header, there are three items that seem to be listed for sale or as examples of products offered:1. A basketball with the text “JUMBO” written on it and priced at 100,000 (currency not specified, but likely Korean won), indicating that it is a jumbo-sized basketball.2. A soccer ball with the Nike logo on it, priced at 50,000, which indicates that it is a Nike brand soccer ball.3. A keyboard listed at 10,000, suggesting that it is an affordable computer keyboard.On both sides of the header, there are pictures of pineapples, which might be decorative elements unrelated to the products or part of the design aesthetic of the website.

추가적인 문의 사항이 있으시면 언제든지 질문해 주세요. 감사합니다!