React Props~ state

Props

태그의 속성을 리액트에서는 PROP이라고 부른다.

function Header(props){
  console.log(props);
  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>);
  }
  return <nav>
    <ol>
    {lis}  
    </ol>
</nav>
}

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

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"></Header>
       <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

이벤트

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(event.target.id);
    }}>{t.title}</a></li>);
  }
  return <nav>
    <ol>
    {lis}  
    </ol>
</nav>
}

/* App 함수 수정 */
<Nav topics={topics} onChangeMode= {(id)=>{
   alert(id);
}}></Nav>

state

prop은 컴포넌트 사용자 state는 컴포넌트를 만드는 내부자를 위한 것

 

다음 코드는 mode 값이 바뀌더라도 App 함수가 다시 실행되지 않기 때문에 원하는 동작이 수행되지 않음 

...
function App() {
  let mode = 'WELCOME'; 
  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'){
    content = <Article title="READ" body="Hello, READ"></Article>;
  }

  return (
    <div>
      <Header title="WEB" onChangeMode={
        function(){
          mode = 'WELCOME';
        }}></Header>
       <Nav topics={topics} onChangeMode= {(id)=>{
          mode = 'READ';
}}></Nav>
      {content}
    </div>
  );
}

 

mode 값이 바뀌면 컴포넌트 함수가 다시 실행되고, 새로운 리턴 값이 만들어지고 그 값이 UI에 반영되길 바람

이때 state를 사용

import {useState} from 'react';

속성 값은 문자열로 전달되므로 Number로 변환 필요

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() {
  let [mode, setMode] = useState('WELCOME'); // 배열을 리턴, 0번째 원소 상태값
  // 1번째 원소는 상태를 변경할 때 사용하는 함수

  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;
    for(let i=0; i<topics.length; i++){
      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={
        function(){
          setMode('WELCOME');
        }}></Header>
       <Nav topics={topics} onChangeMode= {(_id)=>{
          setMode('READ');
          setId(_id);

}}></Nav>
      {content}
    </div>
  );
}


export default App;