04 React State

State는 Prop 와 같이 Component에 요소들을 동적으로 생성하고 반환하는데 일조한다
차이점은 Prop 는 Component : 외부사용자를위한 데이터 State 는 Component : 내부사용자를 위한 데이터이다.

다음 예제를 보자.

function App() {
  const 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 = <Content title="Welcome" body ="Hello, WEB"></Content>;
  }else if(mode === "READ"){
    content = <Content title="Read" body ="Hello, Read"></Content>;
  }
  return (
    <div className = "App">
      <Header title="React" onChangeMode={()=>{
        mode = "WELCOME";
      }}></Header>
      <NAV topics = {topics} onChangeMode={(id)=>{
        mode ="READ";        
      }}></NAV>
      {content}
    </div>
  )
  
}

해당 예제에서 중요하게 볼 부분은 NAV Component 밑에 content 이다.
content 는 mode의 값에 따라 가지고있는 Component속성값이 다르다.
그리고 Header나 NAV 태그를 클릭시에 mode값을 바꿔 바뀐 요소를 페이지에 띄워주기위한 일말의 과정인데 이렇게하면 요소들이 바뀌지않는것을 확인할 수 있다.
왜냐하면 해당페이지를 리로딩하지 않았기때문이다. 이때, State를 사용하여 해결할 수 있다.
사용하기위해서는 해당 훅을 먼저 참조해야한다.

import {useState} from 'react';

이후 App function 안에 있는 mode 를 "상태"로 바꾸어준다.

const mode = useState("WELCOME");

이렇게하면 useState가 상태를 반환할것이고 그것을 mode에 저장한게 된다.

mode를 console로 찍어보면

0번째 데이터는 상태의 값이고
1번째 데이터는 그 상태의 값을 변경할때 사용하는 함수이다.

const _mode = useState("WELCOME");
const mode = _mode[0];
const setMode = _mode[1];

해당 코드를 한줄로 줄이면

 const [mode, setMode] = useState("WELCOME");

라고 쓸 수 있다.

이를 활용하여 코드를 수정하면

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 = <Content title="Welcome" body ="Hello, WEB"></Content>;
  }else if(mode === "READ"){
    content = <Content title="Read" body ="Hello, Read"></Content>;
  }
  return (
    <div className = "App">
      <Header title="React" onChangeMode={()=>{
        setMode("WELCOME");
      }}></Header>
      <NAV topics = {topics} onChangeMode={(id)=>{
        setMode("READ");
      }}></NAV>
      {content}
    </div>
  )
  
}

이렇게 볼 수 있고 setMode 호출시 WebComponent를 다시 불러와 새로운 화면을 보여주게 된다.

이 페이지에서 li로 만든 list를 클릭할때 그 list에 맞게 Content 영역을 동적으로 바꾸고싶다면 어떻게 해야할까?

App 함수에 있는 topics 가 가지고있는것이 해당 li에 대한 값들이다.
해당값들을 순회하면서 클릭한 li와 같다면 content의 값들을 수정하면된다.

그리고 li를 클릭할때 onchangeMode함수에 매개변수를 클릭한 id의 번호를 주기로 약속되어있다.