TIL 6주 2일차

• 리액트

'./App' -> .(점)은 현재 디렉토리를 나타낸다.

 

리액트는 사용자정의태그를 만드는 기술이다.

 

사용자정의태그를 만들 때 -> 함수를 만들어준다

리액트에서는 태그 앞글자는 '대문자'로!

리액트에서는 사용자정의태그를 컴포넌트(Component)라는 표현을 쓴다.

function Header() {

  return <header>

    <h1><a href="/">WEB</a></h1>

    </header>

}

function App() {

  return (

    <div>

      <Header />

    </div>

  );

}

-------------------------------------------------------

 

function Header() {

  return <header>

    <h1><a href="/">React</a></h1>

    </header>

}

 

function Nav() {

  return <nav>

    <li>html</li>

    <li>css</li>

    <li>js</li>

    </nav>

}

function App() {

  return (

    <div>

      <Header />

      <Header />

      <Header />

      <Nav />

    </div>

  );

}

 

---

[props]

리액트에서는 속성을 PROP라 부른다

function Header(props) {

  return <header>

    <h1><a href="/" >{props.title}</a></h1>

    </header>

}

function App() {

 

  return (

    <div>

      <Header title="WEB" />

      <Nav topics={topics}/>

      <Article title="Welcome" body="Hello, WEB"/>

    </div>

  );

}

 

---

arrow function

 

function(){

        alert('Header');

      }

 

 ===

 

()=>{

        alert('Header');

      }

 

---

- Props는 컴포넌트의 외부에서 사용하는 입력값

- State는 컴포넌트 내부에서 사용하는 값

 

import {useState} from "react";

state를 사용할려면 useState라는 (hook)을 사용

 

// const _mode = useState('WELCOME');

  // const mode = _mode[0];

  // const setMode = _mode[1];

  const [mode, setMode] = useState('WELCOME');