생활코딩 - React state - 다시 보기

state

Prop이라는 입력이 들어와 return값을 만들어 출력하면 새로운 UI가 된다.

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

🐥 import {useState, usestate} from 'react' 를 추가해야 한다.

• const mode = ' ' 에서 mode는 지역변수인데
  const mode = useState(' ') state(상태)로 업그레이드 시킨다.

import logo from './logo.svg';
import './App.css';
import {useState, usestate} from 'react';


function Article(props) {
    return  <article>
                <h2>{props.title}</h2>
                {props.body}
            </article>
}

function Header(props) {
    return  <header>
                <h1><a href="/" onClick={function(event){
                    event.preventDefault();
                    props.onChangeMode()
                }}>{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 id={t.id} href={'/read/'+t.id} onClick={event => {
                    event.preventDefault()
                    props.onChangeMode(Number(event.target.id))
                }}>{t.title}</a>
            </li>)
    }
    return  <nav>
                <ol>
                    {lis}
                </ol>
            </nav>
}

function App() {
    const [mode, setMode] = useState('WELCOME')
    const [id, setId] = useState(null)
    const topics = [
        {id:1, title:'html', body:'html is ...'},
        {id:2, title:'css', body:'css is ...'},
        {id:3, title:'javascript', body:'javascript is ...'}
    ]
    let content = null;
    if(mode === 'WELCOME'){
        content = <Article title="Welcome" body="Hello, WEB"></Article>
    } else if(mode === 'READ') {
        let title, body = null
        for(let i = 0; i < topics.length; i++) {
            console.log(topics[i].id, id)
            if(topics[i].id === id){
                title = topics[i].title
                body = topics[i].body
            }
        }
        content = <Article title={title} body={body}></Article>
    }
    return (
        <div>
            <Header title="WEB" onChangeMode={() => 
                setMode('WELCOME')
            }></Header>
            <Nav topics={topics} onChangeMode={(_id) => {
                setMode('READ')
                setId(_id)
            }}></Nav>
            {content}
        </div>
    );
}

export default App;

🐷 이 전에 flask 강의를 들었을 때의 append(temp_html)과 비슷한것 같다는 생각이 들었다.