happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

컴포넌트

컴포넌트에 대해서 알아보겠습니다.

src/App.js 파일을 수정하겠습니다.

src/App.js의 내용을 모두 지우고 아래와 같이 작성합니다.

/src/App.js

import React from 'react';

function App() {
    return (
        <div></div>
    );
}

export default App;

위의 코드를 저장하면 프로젝트는 다음과 같이 빈화면이 니타납니다.

component App

아무것도 안나타나는 이유에 대해 알아봅시다.

그러기 위해 우선 App.js 코드를 살펴봅시다.

첫번재 줄에 있는

import React from 'react';

이것은 리액트의 여러기능을 사용할 수 있게 해줍니다.

function App() {
    return (
        <div></div>
    );
}

function을 사용하여 함수같지만 이것은 컴포넌트입니다.

컴포넌트를 생성 할 때는 다음과 같이 합니다.

function 컴포넌트명() {
    return (
        반환할 JSX
    );
}

컴포넌트명의 첫번째는 글자는 대문자로 작성합니다.

JSX라는것은 HTML과 JavaScript를 조합한 문법입니다.

HTML처럼 보이지만 실은 JSX입니다.

export default App;

위의 코드는 다른 파일에서 이 컴포넌트를 import할 수 있게 해줍니다.

즉, index.js에서 이 파일을 import할 수 없게 됩니다.

그럼 컴포넌트에 다음과 같이 Hello를 적어보세요.

/src/App.js

import React from 'react';

function App() {
    return (
        <div>Hello</div>
    );
}

export default App;
component App Hello

다음과 같이 JSX를 한 줄로 표현하면 return에 괄호는 없어도 표시됩니다.

/src/App.js

import React from 'react';

function App() {
    return <div>Hello</div>;
}

export default App;

자, 그럼 index.js를 다음의 코드로 수정합니다.

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

위의 코드를 보면 App 컴포넌트를 다음과 같이 import하고 있습니다.

import App from './App';

App 컴포넌트 파일에서는 다음의 코드가 있기 때문에 다른 파일에서도 import 할 수 있습니다.

export default App;

ReactDom.render()은 화면에 내용을 출력하는 기능을 합니다.

ReactDOM.render(<App />,document.getElementById('root'));

첫번째 인자인 <App />는 App 컴포넌트가 반환한 내용을 뜻합니다.

두번째 인자인 document.getElementById('root')는 App컴포넌트가 반환한 내용이 들어갈 태그입니다.

즉 id가 root인 태그에 들어갑니다.

root를 main으로 변경해 봅시다.

다음 두개의 파일에서 root만 main으로 변경합니다.

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />,document.getElementById('main'));

/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>My First React APP</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="main"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
component main

결과는 이미지와 같이 똑같습니다.

다시 원래대로 main을 root로 변경합니다.

자, 그럼 App.js와 같이 우리가 컴포넌트를 하나 더 만들어서 그 내용을 출력해 봅시다.

src폴더에 Device.js 파일을 생성한 후 다음의 내용을 입력합니다.

/src/Device.js

import React from 'react';

function Device() {
    return <div>My Device</div>;
}

export default Device;

자, 그럼 index.js파일에 Device 컴포넌트를 import하고 출력합시다.

다음과 같이 수정합니다.

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import Device from './Device';

ReactDOM.render(<Device />,document.getElementById('root'));

다음과 같이 Device 컴포넌트의 내용이 나타납니다.

component Device

자, 그럼 App와 Device 컴포넌트를 한번에 출력할려면 어떻게 할까요?

index.js파일의 render함수에 두개의 컴포넌트를 넣으면 될까요?

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import Device from './Device';

ReactDOM.render(<App /><Device />,document.getElementById('root'));

아쉽지만 다음과 같이 오류가 나타납니다.

component two component

다음시간에 다수의 컴포넌트를 출력하는 방법에 대해 알아봅시다.


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

학교나 학원에서 배우는 것과는 완전히 다른 분위기, 다른 방식으로 들려주는 수학이야기입니다. 수학을 공부하면서도 괴로워하고 힘들어하는 학생들의 마음을 달래주려는 의도로 쓰여진 책입니다. 학생들이 수학과 친해질 수 있도록 도와주기 위해 이야기를 시작하는 점이 색다릅니다. 그냥 설득하는 것이 아니라 가장 좋은 방법인 다른 사람들의 사례들을 들려줍니다. 수학과 친하게 된 사람들의 경험담들. 누군가 어떤 경험을 했다는 것은 내 자신도 경험 가능한 옵션의 테두리 안으로 들어올 수 있다는 것이니까요. 그 다음은 바로 수학공부하자 하지 않고 게임들을 먼저 소개해줍니다. 바둑알, 화투, 트럼프 카드, 등등 우리 주변에 있는 것들을 이용해 친구, 가족과 쉽게 즐기며 논리력을 키울 수 있는 게임들입니다. 초등학교 때부터의 수학 교과 내용이 어떻게 연결되는지 설명하는데, 각 단원 별 의미와 배경을 알려 줍니다. 중학교 수학과정들을 파트별도 정리하여 전체적인 면을 보여줍니다. 마치 산책이나 갈까 했다 동네 뒷산 올라가서보니 뜻밖에 우리 동네가 이렇게 생겼구나 하는 사실을 깨닫게 되는 느낌입니다. 시험과 성적 올리기 비법 이야기는 전혀 안하면서 수학 공부하라고 부드럽게 둘레길처럼 이야기하는 독특한 책입니다. 수학 이야기책, 수학 교과과정 해설서, 가이드북, 혹은 힐링책처럼도 느껴집니다. 이유도 모른 채 뭘 자꾸 풀이하라고 하는 수학이 지루하고 답답하고 화가 날 때 이 책에 담긴 무척 포괄적인 내용을 알고 있다면, 기억한다면 격렬한 거부감이 누그러들지도 모르겠습니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준