5일차 - react state

✅react state

prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다.  하지만

prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고

state는 컴포넌트를 만드는 내부자를 위한 데이터이다. 

 

function App() {
  const mode = 'READ';
  const topics = [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'html 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 className="App">
      <Header title="react" onChangeMode={()=>{
        mode = 'WELCOME';
              }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
         mode = 'READ';  
         //이때 nav 안에 있는 값을 눌러도 APP함수는 다시 실행되지 않기 떄문에 return값에는 변화가 없다.
         //즉 nav를 누르면 mode 가 read가 돼서 article값이 변화해야 하는데 변하지 않음 
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

 

content를 변수로 설정하고  if문의 조건값에 따라  <article/>이 바뀐다.   

const mode = 'READ' 의 mode를 state를 활용해 값을 바꾸고 그 값에 따라  App 컴포넌트가 새로 실행되게끔 바꿀 것이다. 

 

 

✅usestate

usestate는 배열을 return 하고 0번 째 값은 상태의 값을 읽을 때 사용하고 1번 째 값은 상태의 값을 변경하는 함수로 사용된다. 

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

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

  )
}

function App() {
  // const _mode = useState('welcome');
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState('WELCOME');

  const topics = [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'html 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={()=>{
        setMode = ('WELCOME');
              }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        setMode('READ');
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

 

1. mode의 값이 setMode로 인해 read로 바뀜 

2. App 컴퍼넌트가 다시 실행됨

3. 그러면 useState가 mode의 값을 read로 셋팅함 

4. 그러면 mode의 값을 read로 읽고 화면에는

<Article title="Read" body="hello, Read"></Article> 이게 보임 !

 

 

 

※mode의 값은 이름을 아무거나 해도 됨 

 

 

✅최종코드

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

function Header(props){
  console.log('props',props.title);
  return (
    <header>
        <h1><a href='/read/' onClick={(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));
      //  Number 안하면 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 _mode = useState('welcome');
  // const mode = _mode[0];
  // const setMode = _mode[1];
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
    // 아직 선택된 값은 없으니깐 초기값을 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++ ) {
      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)
        // _id "붙이면 문자로 인식해서 실행 안됨
        // nav 안에 li 클릭하면 
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

 

초기의 mode를 WELCOME로 설정해 브라우저에는 Welcome hello,WEB이 보인다. 여기서 nav li 안에 있는 topics를 클릭하면 mode가 READ로 셋팅되고 각 id값과 일치하는 원소를 찾아서  title과 body의 값이 브라우저화면에 띄어진다.

 

setId(_id)의 _id 값은 어디서 만들어질까? -> nav안에 있다. -> 우리는 event.target.id 값으로 id의 값을 알아내고 있다. 

우리가 입력한 값은 숫자였는데 {}태그의 속성으로 넘기면 문자가 된다. 그래서 Number( event.target.id ) 으로 바꿔줘야한다!