[React] State

💡 State

• 컴포넌트는 입력과 출력이 있다, 입력은 Prop 이다
• Prop을 통해 입력 된 데이터를 컴포넌트 함수가 처리해서 리턴값을 만들면 그 리턴값이 새로운 UI 가 된다
• Prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어주는 데이터가 state 이다

❓ Prop 과 State 차이점

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

# State 사용법 배우기

• Header 클릭하면 welcom 페이지 나오게
• Nav 클릭하면 Read 페이지 나오게

function App() {
  const mode = 'WELCOME';  // mode 변수
  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;  // content 변수
  if (mode === 'WELCOME') {  // 📍 mode의 값이 'WELCOME' 일 때
    content = <Article title="Welcome" body="Hello, WEB"></Article>
  } else if (mode === 'READ') {  // 📍 mode의 값이 'READ' 일 때
    content = <Article title="Read" body="Hello, Read"></Article>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={() => {
        mode = 'WELCOME';
      }}></Header>
      <Nav topics={topics} onChangeMode={(id) => {
        mode = 'READ';
      }}></Nav>
      {content}  // content 변수 출력
    </div>
  );
}

❗️ 문제점 " UI가 바뀌지 않는다 "

mode의 값을 READ로 바꿨지만 APP 함수는 다시 실행되지 않아 return 값이 변하지 않기 때문

# useState Hook 사용

• mode 값이 바뀌면 컴포넌트 함수가 새로 실행되면서 새로운 리턴값이 만들어지고 UI 에 반영하려면 → state 사용
• import 를 하고 useState라는 Hook을 사용 : 리액트에서 기본적으로 제공하는 함수

// 📍 useState Hook
import {useState} from 'react';

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: '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={() => {
        setMode = 'WELCOME';  // 📍 값을 바꿀때 setMode 사용
      }}></Header>
      <Nav topics={topics} onChangeMode={(id) => {
        setMode = 'READ';    // 📍 값을 바꿀때 setMode 사용
      }}></Nav>
      {content}  // content 변수 출력
    </div>
  );
}

# 완성

import {useState} from 'react';

function App() {
  const [mode, setMode] = useState('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={() => {
        setMode('WELCOME');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id) => {
        setMode('READ');
      }}></Nav>
      {content}
    </div>
  );
}

📍 mode, setMode 의 이름은 내 마음대로 정할 수 있다

❗️ 추가 " READ에 [topics] title, body 값 가져오기 "

function Nav (props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      // 📍 id가 태그의 속성으로 넘기면 문자가 되버림
      <li key={t.id}>  
        <a href={'/read/'+t.id} onClick={(event) => {
          event.preventDefault();
          // 📍숫자로 컨버팅 Number 함수 사용
          props.onChangeMode(Number(t.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++) {
      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);  // 📍 setId 값 셋팅
      }}></Nav>
      {content}
    </div>
  );
}

✨ 끝 !

✦ 출처 : 생활코딩 [React 2022년 개정판]