React

React 시작하기

서여랑 2023. 9. 11. 06:06

node.js 설치 후 사용

vs코드 터미널에 사용할 경로 폴더 선택 후

npx create-react-app (폴더이름)

명령어 실행 설치, powershell은 작동이 잘 안되니 cmd에서 실행하는게 좋음

React

사용자 정의 태그(어떠한 역할을 하는 태그들을 묶어 단순화 시킬수 있다. Class 개념인듯?)를 사용 할 수 있는 장점

  • Called a “Compoent”
src - App.js 원본

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

function App() {
  return (
logo

Edit src/App.js and save to reload.

Learn React 
); }

사용자 정의 태그 사용 전 src - App.js

import logo from './logo.svg';
import './App.css';
===========================================================================================
function App() {
  return (
    <div>
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>
      <nav>
        <ol>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">css</a></li>
        <li><a href="/read/3">js</a></li>
        </ol>
      </nav>
      <article>
        <h2>Wellcome</h2>
        Hello, WEB
      </article>
    </div>
============================================================================================
  );
}

export default App;

사용자 정의태그 사용 후 src - App.js

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

function Header(){
  return <header>
  <h1><a href="/">WEB</a></h1>
</header>
}

function Nav(){
  return <nav>
        <ol>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">css</a></li>
        <li><a href="/read/3">js</a></li>
        </ol>
      </nav>
}
function Article(){
  return <article>
  <h2>Wellcome</h2>
  Hello, WEB
</article>
}

====================================================================================

function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>

  );
}
========================================================================================
export default App;

결과 창은 같다.

0618-React

node.js 설치 후 사용

vs코드 터미널에 사용할 경로 폴더 선택 후

npx create-react-app (폴더이름)

명령어 실행 설치, powershell은 작동이 잘 안되니 cmd에서 실행하는게 좋음

React

사용자 정의 태그(어떠한 역할을 하는 태그들을 묶어 단순화 시킬수 있다. Class 개념인듯?)를 사용 할 수 있는 장점

  • Called a “Compoent”
src - App.js 원본

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

function App() {
  return (
logo

Edit src/App.js and save to reload.

Learn React 
); }

사용자 정의 태그 사용 전 src - App.js

import logo from './logo.svg';
import './App.css';
===========================================================================================
function App() {
  return (
    <div>
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>
      <nav>
        <ol>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">css</a></li>
        <li><a href="/read/3">js</a></li>
        </ol>
      </nav>
      <article>
        <h2>Wellcome</h2>
        Hello, WEB
      </article>
    </div>
============================================================================================
  );
}

export default App;

사용자 정의태그 사용 후 src - App.js

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

function Header(){
  return <header>
  <h1><a href="/">WEB</a></h1>
</header>
}

function Nav(){
  return <nav>
        <ol>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">css</a></li>
        <li><a href="/read/3">js</a></li>
        </ol>
      </nav>
}
function Article(){
  return <article>
  <h2>Wellcome</h2>
  Hello, WEB
</article>
}

====================================================================================

function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>

  );
}
========================================================================================
export default App;

결과 창은 같다.

결국 사용자 정의 태그를 사용하여 하나의 함수로 지정한 뒤 원할 때 마다 불러와 사용하면 되기 때문에 초반 사용자 정의 태그를 잘 설정 해 두면 후에 코드가 굉장히 짧아진다.

PROP(속성)

src에 따라 이미가 달라지고 width 와 height에 따라 길이와 높이가 달라진다 (속성이 달라진다)

결국 사용자 정의 태그를 사용하여 하나의 함수로 지정한 뒤 원할 때 마다 불러와 사용하면 되기 때문에 초반 사용자 정의 태그를 잘 설정 해 두면 후에 코드가 굉장히 짧아진다.

PROP(속성)

src에 따라 이미가 달라지고 width 와 height에 따라 길이와 높이가 달라진다 (속성이 달라진다)