220512 React

실습환경구축

Create React App
npx 명령어 사용하기 위해서는 node.js가 다운받아 있어야 한다.
visual studio로 폴더 만들어서 연다(바탕화면-생활코딩-react-app)
터미널

npx create-react-app .

react환경 시작

npm start

소스코드 수정방법

src >index.js 입구파일. npm start하면 index.js에 적힌대로 동작하는 것
이 화면에 있는 모든 내용을 가지고 있는 것.
은 import App from './App';을 통해 사용한 것.
./App은 js가 생략된 파일로, index.js와 같은 위치의 App.js파일을 말한다.
App.js를 편집하면서 ui를 만들어가는 것.
App.css를 import해오고 있으므로, App.css의 css의 스타일을 따른다.
index.js에도 index.css파일이 있다.

App태그위에는 root태그가 있는데,
root는 public폴더의 index.html파일에 존재한다.

배포

터미널에서
npm run build
build라는 폴더가 생성됨.

npx serve -s build

build폴더에 있는 index.html을 서비스하는 웹서버가 실행됨.

---

컴포넌트만들기

사용자 정의 태그를 만들때는 함수를 정의하면 된다!
App.js에서 대문자로 function을 이용해 사용자 정의 태그를 만든다.

import logo from './logo.svg';
import './App.css';
function Header(){   //여기부터
  return <header>
  <h1><a href="/">WEB</a> </h1>
</header>
} //여기까지 함수 정의
function App() {
  return (
    <div>
      <Header></Header> //정의한 함수를 사용자 정의 태그로 사용(React에서는 이것을 컴포넌트라고 한다)
      <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>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

---

props

react의 속성을 prop이라고 부른다.

import logo from './logo.svg';
import './App.css';
function Header(props){ //props
  console.log('props', props, props.title);
  return <header>
  <h1><a href="/">{props.title}</a> </h1> //REACT가 출력됨
</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>Welcome</h2>
  Hello, WEB
</article>
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header> //title prop지정
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

for문 사용

import logo from './logo.svg';
import './App.css';
function Header(props){
  console.log('props', props, props.title);
  return <header>
  <h1><a href="/">{props.title}</a> </h1>
</header>
}
function Nav(props){
  const lis = [ //배열생성
    
  ]
  for(let i=0; i<props.topics.length;i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>) //push
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}
function Article(props) {
  return <article>
  <h2>{props.title}</h2>
  {props.body}
</article>
}
function App() {
  const topics = [ //topics선언및 초기화
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav> //topics 사용
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

---

이벤트

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

function Nav(props){
  const lis = [
    
  ]
  for(let i=0; i<props.topics.length;i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>)
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}
function Article(props) {
  return <article>
  <h2>{props.title}</h2>
  {props.body}
</article>
}
function Header(props){
  console.log('props', props, props.title);
  return <header>
  <h1><a href="/" onClick={function(event){ //onClick시 함수실행
    event.preventDefault();
    props.onChangeMode();
  }}>{props.title}</a> </h1>
</header>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={function(){ //함수 정의
        alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

arrow function사용

function Header(props){
  console.log('props', props, props.title);
  return <header>
  <h1><a href="/" onClick={(event)=>{ //arrow
    event.preventDefault();
    props.onChangeMode();
  }}>{props.title}</a> </h1>
</header>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{ //arrow
        alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

인자를 가진 함수 호출

unction Nav(props){
  const lis = [
    
  ]
  for(let i=0; i<props.topics.length;i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(event.target.id); //인자전달
      }}>{t.title}</a>
    </li>)
  }
  return <nav>
  <ol>
    {lis}
  </ol>
</nav>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{ //id라는 파라미터
        alert(id);
      }}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

---

state

prop은 컴포넌트를 사용하는 외부자를 위한 데이터, state는 컴포넌트를 만드는 내부자를 위한 데이터

import {useState} from 'react';