component(사용자 정의 태그) 만들기

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4

 

• Component

- 리액트는 사용자 정의 태그(component)를 만드는 기술

- 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것.

- 컴포넌트는 첫문자가 대문자

import logo from'.logo.svg';
imperot ',App.css';
function Header(){
  return <header>
	<h1><a href="/">REACT</a></h1>
  </header>
}
function Nav(){
  return <nav>
    <ol>
      <li><a href="/read1">html</a></li>
      <li><a href="/read2">html</a></li>
      <li><a href="/read3">html</a></li>
    </ol>
  </nav>
  }
  function Article(){
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
  }
  function App(){
    return (
      <div>
        <Header></Header>
        <Nav></Nav>
        <Article></Article>
      </div>
 );
}

export default App;

---

• props

 

 

 

 

 

 

- props는 속성을 나타내는 데이터.  props를 통해 component 에 속성을 줄 수 있음.

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

 

 

 

 

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

- 이벤트는 Props를 이용

- event.preventDefault()를 이용해서 기본동작을 비활성화 할 수 있음 ( 웬만하면 쓰지 말아야할 기능!)

- form을 변경할 때는 Props를 State로 전환 후 onChange를 이용.