인프런 커뮤니티 질문&답변
작성한 질문수
5.4) Props로 데이터 전달하기 Button 추가 시 서버가 응답을 하지 않습니다.
해결된 질문
작성
·
100
0
commponents 폴더 하위에 Button.jsx 파일을 만들고
const Button = () => {
return <Button>Click</Button>;
};
export default Button;
이렇게 입력한 후에
App.jsx에서
import "./App.css";
import Header from "./commponents/Header.jsx";
import Footer from "./commponents/Footer.jsx";
import Main from "./commponents/Main.jsx";
import Button from "./commponents/Button.jsx";
function App() {
return (
<>
<Button />
<Button />
<Button />
</>
);
}
export default App;
이렇게 입력하고 새로고침을 하면
계속 이렇게 나오는데 왜 그런걸까요.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨
질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)
질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 3
0
0
안녕하세요 이정환입니다.
현재 그림으로 캡쳐해 올려주신 에러는 Node.js로 실행되고 있는 리액트 앱이 과도하게 메모리를 점유해 발생하는 걸로 알려져 있습니다. 혹시 다른 프로그램을 최대한 종료하고 다시 시도해보시겠어요?
그래도 동일한 문제가 발생한다면 브라우저를 크롬으로 변경해 확인해보세요
그래도 안된다면! 코드 상에 문제가 발생했을 가능성이 높으르모 전체 프로젝트 코드를 깃허브 또는 구글드라이브 링크로 전달 주시면 확인해보겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
이성님, Button 컴포넌트를 만들 때 발생하는 문제에 대해 설명드리겠습니다. 현재 작성하신 코드에서 Button 컴포넌트 내에 <Button> 태그를 사용하고 계신데요, 이는 HTML의 기본 button 요소와 충돌이 발생할 수 있습니다. 실제로 Button 컴포넌트 내 <Button>이라고 작성하게 되면 React는 <Button> 컴포넌트를 찾으려고 시도하며, 이로 인해 컴포넌트가 계속 스스로를 호출하는 무한 루프가 발생하여 메모리 부족 오류가 발생할 수 있습니다.
이 문제를 해결하기 위해 아래와 같이 Button 컴포넌트에서 HTML의 button 요소를 사용하도록 수정해 주세요:
const Button = () => {
return <button>Click</button>;
};
export default Button;
위와 같이 수정하시면, 예기치 않은 오류 없이 정상적으로 버튼이 렌더링될 것입니다.
이와 유사한 문제에 대한 해결 방법은 커뮤니티 포럼에서 다양한 예제를 통해 확인하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.