React 5. State

React의 State

- React에서 State는 컴포넌트 내에서 관리되는 데이터의 상태를 나타냅니다. 

- State는 컴포넌트의 라이프사이클 동안 변경될수 없으며, 변경될 때 마다 컴포넌트는 다시 렌더링 됩니다. 

- 컴포넌트의 내부에서만 사용되며, 다른 컴포넌트에 props로 전달될 수 있습니다. 

- 다른 컴포넌트에서 변경될 수 없으며, 변경이 필요한경우 props를 통해 전달된 콜백 함수를 호출하여 부모 컴포넌트에서 State를 업데이트 해야합니다. 

---

React 4에서 사용하던 소스 그대로 시작 해보겠습니다. 

 

저는 현재 페이지에서

1.html

2.css

3.javascript

1,2,3번 클릭 하였을때 본문에 내용이 바뀌는걸 해보려합니다. 

잘따라오세요 ~

1. 일단 State를 설명하기전 이해를 돕기 차근차근 하나씩 해보도록 하겠습니다. 

/*윗줄 생략 !*/
/* 풀 소스는 해당 블로그 맨 밑에 올려 놓겠습니다. */


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; // content라는 변수를 선언 하고 ~
  if (mode === 'WELCOME'){
    // 만약 모드가 'WELCOME' 이라면 content에 Article을 담아줍니다. 
    content = <Article title='Welcome' body='Hello, WEB'></Article>


  }else if(mode === 'READ'){
    // 만약 모드가 'READ'라면 content에 Article을 담아줍니다. 
    content = <Article title='Read' body='Hello, Read'></Article>

  }
  return (
    <div className="App">
      <Header title='WEB' onChangeMode = {()=> {
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode = {(id)=>{
        alert(id);
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

React 4소스에서 3가지 부분을 수정해 주었습니다. 

1. mode변수 선언  mode의 값이 'WELCOME'일때랑 'READ' 비교하기 

2. 조건문을 이용 

3. content변수를 이용하여 본문 내용을 불러오기 !

Mode의 값이 변경 되면 본문의 내용이 바뀌는것을 확인 하실수 있습니다.

---

2. 이제 우리가 해야 할것은 mode의 값이 이벤트가 발생했을때 바꾸는것 입니다. 

2-1. mode의 값을 변경 해줄 규칙이 필요하다. 

  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);

mode의 값을 변경 해줄 useState이 필요하고, id의 값을 변경해줄 useState가 필요합니다. 

위 코드는 그냥 규칙이라고 생각하시면 됩니다. 

([  ,  ] 앞에 있는 값을 변경 해주기위해 set**이 필요하다 !라는 느낌으로)

 

✔useState를 사용하기 위해서는 맨 위에 import부분에 

import { useState } from 'react';

을 추가 해주셔야 합니다. 

 

---

2-2. <Article>의 title값과 body의 값을 초기화 해주고, topics의 요소를 id값으로 찾아 올수 있는 for문

  let content = null; // content라는 변수를 선언 하고 ~
  if (mode === 'WELCOME'){
    // 만약 모드가 'WELCOME' 이라면 content에 Article을 담아줍니다. 
    content = <Article title='Welcome' body='Hello, WEB'></Article>
  }else if(mode === 'READ'){
    let title, body = null; // 타이틀과 바디의 값 초기화
    // for문은 이용하여 위에 topics값에서 해당 id값에 맞는 값을 찾는다. 
    for(let i =0; i<topics.length; i++){
      if (topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    // 만약 모드가 'READ'라면 content에 Article을 담아줍니다. 
    content = <Article title={title} body={body}></Article>
  }

✔ 근데 여기서 id의 값은 위 컨포넌트에서 태그의 특성상 문자열로 받아오기 때문에 숫자형(Number)으로 바꿔 줄 필요가 있다.

function Nav(props){
  const lis =[]
  for (let i=0; i<props.topics.length; i++){
    let t = props.topics[i];
    lis.push(<li ket = {t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event => {
        event.preventDefault(); //a태그를 클릭해도 아무변화가 없게 해주는코드
        
        
        // event.target => 이벤트를 발생시킨 태그를 가르키게 된다. 
        // 여기서 받아오는 id의 값은 태그의 속성상 문자열이 된다. 
        // 그래서 Number을 이용해 숫자형으로 변경(컨버팅) 해주어야 한다. 
        props.onChangeMode(Number(event.target.id));
        
        
      }}>{t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lis} 
    </ol>
  </nav>
}

---

전체 소스)

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

function Header(props){
  return <header> 
      <h1><a href="/" 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 ket = {t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={event => {
        event.preventDefault(); //a태그를 클릭해도 아무변화가 없게 해주는코드
        props.onChangeMode(Number(event.target.id));// event.target => 이벤트를 발생시킨 태그를 가르키게 된다. // 여기서 받아오는 id의 값은 태그의 속성상 문자열이 된다. 그래서 Number을 이용해 숫자형으로 변경(컨버팅) 해주어야 한다. 
      }}>{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');// 지역변수를 state상태로 업데이트 [useState는 import {useState}를 이용해서 사용할 수 있다.]
  // const mode = _mode[0];    // useState('WELCOME')은 초기 값이 된다. 
  // const setMode = _mode[1]; // setMode를 이용하여 "mode의 값을 바꿀수 있다"라는 규칙이 생성되게 된다.
  
  //위 3줄의 코드 축약 코드 
  const [mode, setMode] = useState('WELCOME');
  // 풀어 해석하면 mode의 초기값은 'WELCOME'이 되고, 그 값을 변경 시켜줄수 있는애는 setMode가 된다. 
  // 여기서 [ , ] 괄호 안에 들어가는 변수의 이름은 마음대로 설정 가능하다. 
  const [id, setId] = useState(null);
  // 어떠한 이벤트가 발생 하였을때 id값을 이용하여 접근하겠다. id값은 아직 정해지지 않기 때문에 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; // content라는 변수를 선언 하고 ~
  if (mode === 'WELCOME'){
    // 만약 모드가 'WELCOME' 이라면 content에 Article을 담아줍니다. 
    content = <Article title='Welcome' body='Hello, WEB'></Article>
  }else if(mode === 'READ'){
    let title, body = null; // 타이틀과 바디의 값 초기화
    // for문은 이용하여 위에 topics값에서 해당 id값에 맞는 값을 찾는다. 
    for(let i =0; i<topics.length; i++){
      if (topics[i].id === id){
        title = topics[i].title;
        body = topics[i].body;
      }
    }
    // 만약 모드가 'READ'라면 content에 Article을 담아줍니다. 
    content = <Article title={title} body={body}></Article>
  }
  
  return (
    <div className="App">
      <Header title='WEB' onChangeMode = {()=> {
        setMode('WELCOME');
      }}></Header>
      <Nav topics={topics} onChangeMode = {(_id)=>{
        // 1,2,3번의 컨포넌트중 하나가 눌려 이벤트가 발생 하였을때, 
        // functiond App가 새로 리로드 되면서 id의 값이 해당 id값으로 지정된다. 
        setMode('READ');
        setId(_id); 
      }}></Nav>
      {content}
    </div>
  );
}

export default App;