• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

실행 시켜도 변화가 없어요

22.09.07 18:18 작성 조회수 545

1

index.js랑 jsx 완벽합니다

app.js 문지인것같은데 왜일까요

잠고로 왜 app.js가 문제냐면다른게 문제가 없습니다.

제가 전 강의에서 뭔가를 안바꿨나요.

버전 최신입니다

답변 9

·

답변을 작성해보세요.

0

tlsehdrl4340님의 프로필

tlsehdrl4340

2022.11.15

저도 같은 현상으로 기본 화면만 출력되고 있습니다만, 원인을 모르겠어서 질문 남겨봅니다.

import React from "react";

function Book(props){
    return (
        <div>
            <h1>{'이 책의 이르은 ${props.name}입니다.'}</h1>
            <h1>{'이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.'}</h1>       
            </div>
    );
}

export default Book;
 

 

 

import React from "react";
import book from "./Book";

function Library(props) {
    return(
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300}/>
            <Book name="처음 만난 AWS" numOfPage={400}/>
            <Book name="처음 만난 리엑트" numOfPage={500}/>
        </div>
    );
}
export default Library;

 

 

import App from './App';

import reportWebVitals from './reportWebVitals';



import Libray from './chapter_03/Libray';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Libray />

  </React.StrictMode>,
  document.getElementById('root')
);



// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();
tlsehdrl4340님의 프로필

tlsehdrl4340

2022.11.15

저장 후 다시 터미널을 통해 npm start  하니 정상적으로 작동됩니다!

안녕하세요, 소플입니다.

제가 답변을 달기 전에 해결하셨군요~

우선 첨부해주신 코드에서 발견한 몇 가지 수정해야 할 부분 적어드리니 참고하시면 좋겠습니다.

// 컴포넌트를 소문자로 import 하면 안됩니다.
import book from "./Book";

// 아래처럼 대문자가 되어야 합니다.
import Book from "./Book";

h1 태그 사이에 있는 값은 따옴표가 아닌 backtick이라고 부르는 역따옴표(`)를 사용하셔야 합니다.
이 코드는 JavaScript의 Template literals 문법을 사용한 것이기 때문입니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

<div>
    <h1>{'이 책의 이르은 ${props.name}입니다.'}</h1>
    <h1>{'이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.'}</h1>       
</div>

 

앞으로도 실습 진행하시다가 궁금한 점 있으시면 남겨주세요!

감사합니다.

tlsehdrl4340님의 프로필

tlsehdrl4340

2022.11.15

아 역따옴표 부분은 미처 신경쓰지 못했습니다 알려주셔서 감사합니다

0

유승호님의 프로필

유승호

질문자

2022.09.11

다시 처음부터 했더니 됬어요

 

이제 뭐가 문제였는지 찾아보려고요

function Library(props) { return( <div> <book name="처음 만난 파이썬" numOfPage={300}/> <book name="처음 만난 AWS" numOfPage={400}/> <book name="처음 만난 리엑트" numOfPage={500}/> </div> ); }

Book을 book으로 썻네요 ㅎㅎ

 

드디어 원인을 찾으셨군요~

이후 강의에서 나오겠지만, 리액트 컴포넌트의 이름은 모두 대문자로 시작해야 됩니다.

앞으로도 개발하실 때 유의하시기 바랍니다!

0

유승호님의 프로필

유승호

질문자

2022.09.11

바로성공 했어요

ㅜㅜㅜㅜㅜㅜㅜ

0

유승호님의 프로필

유승호

질문자

2022.09.11

네 첨부해들리겠습니다

그리고 제가 찾아보고 찐짜 모른다고 말할때까지 답을 알려주지 말아주세요]

제가 스스로 찾아보겠습니다

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './C03/Library';
ReactDOM.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import React from "react";

function Book(props){
    return(
        <div>
            <h1>{`이책의 이름은 ${props.name}입니다.`}</h1>
            <h2>{`이책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
        </div>
    );
}

export default Book;
import React from "react";
import book from "./Book";

function Library(props) {
    return(
        <div>
            <book name="처음 만난 파이썬" numOfPage={300}/>
            <book name="처음 만난 AWS" numOfPage={400}/>
            <book name="처음 만난 리엑트" numOfPage={500}/>
        </div>
    );
}
export default Library;


mport logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

네, 먼저 충분히 고민해보시고 해결이 안되면 그 때 말씀해주세요~

0

유승호님의 프로필

유승호

질문자

2022.09.09

여전히 작동이 안됩니다

안녕하세요, 유승호님.

문제의 정확한 원인을 파악하기 위해서는 작성하신 코드를 보여주시는게 제일 빠릅니다.

이렇게 툭툭 질문을 올리시면 더욱 더 제가 도움을 드리기 어렵습니다.

스스로 코드가 완벽하다고 생각하실게 아니라, 문제가 생기고 있으면 문제의 원인이 되는 코드 전체를 다 첨부해주세요.

감사합니다.

0

유승호님의 프로필

유승호

질문자

2022.09.09

 

고맙습니다

0

유승호님의 프로필

유승호

질문자

2022.09.08

그릭고 ','이(가) 필요합니다.

다가 index.js 가 에서 뜸니다

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './C03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </React.StrictMode> document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

 

</React.StrictMode>document 사이에 콤마(,)가 빠졌네요~

0

유승호님의 프로필

유승호

질문자

2022.09.08

실행을 시키면 글자가 낱아나야 되는데 그 기본 화면이 나타나고요

모든 코드엔 문제가 없는듯 합니다

다똑같이 따라 했습니다

0

안녕하세요, 유승호님.

막히시는 부분에 대해서 조금 더 자세하게 설명해주시면 정확한 답변이 가능할 것 같습니다!