리액트 08: React useState훅을 이용한 상태에 반응하는 UI표현

안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다.

 

App.js

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

function Header(props){
  console.log(props);
  console.log(props.title);
  return(
    <header>
    <h1>
      <a href="/" onClick={(e)=>{
        e.preventDefault();//기본 이벤트의 동작을 막아줌
        props.onChangeMode();
      }}>
        {props.title}
      </a>
    </h1>
    </header>
  )
}

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

function Nav(props){
  const list = [];
  for(let i=0; i < props.topics.length; i++){
    console.log(props.topics[i].title, props.topics[i].id);
    let t = props.topics[i];
    list.push(<li key={t.id}>
      <a id={t.id} href={'/read/'+t.id} onClick={e=>{
        e.preventDefault();
        props.onChangeMode(Number(e.target.id));
      }}>{t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {list}
    </ol>
  </nav>
}

function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const topics = [
    {id: 1, "title":"블랙핑크", body:"블랙핑크 good!"},
    {id: 2, "title":"아이브", body:"아이브 good!"},
    {id: 3, "title":"르세라핌", body:"르세라핌 good!"},
    {id: 4, "title":"뉴진스", body:"뉴진스 good!"},
    {id: 5, "title":"트와이스", body:"트와이스 good!"},
    {id: 6, "title":"레드벨벳", body:"레드벨벳 good!"},
    {id: 7, "title":"에스파", body:"에스파 good!"}
  ];

  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);
        }}></Nav>
        {content}
    </div>
  );
}

export default App;

 

실습을 마친 후, 이제 우리는 목록과 관련된 이벤트 처리에 있어서 목록의 index값이 얼마나 중요한지, 그리고 각 항목에 id값을 할당하는 것이 이벤트 처리를 얼마나 효율적으로 만들어주는지에 대해 잘 이해할 수 있게 되었습니다.

이번 실습을 통해 얻은 지식을 바탕으로, 앞으로 다양한 목록과 관련된 이벤트 처리 작업에 있어서도 더욱 효율적이고 체계적인 방법을 적용할 수 있기를 바랍니다.

[ 리액트 입문강좌 시리즈 ]

01. React 설치와 초기화면 출력
02. 리액트 배포본 생성을 위한 npm run build
03. 리액트의 꽃 사용자정의 태그
04. 컴포넌트의 섬세한 활용을 위한 props속성 사용
05. 리스트데이터의 활용 topics변수 사용
06.사용자 정의 이벤트 구현
07.리스트 형태의 사용자 정의 이벤트 구현
08. React useState훅을 이용한 상태에 따른 UI표현
09. 리액트 토픽변수를 useState 훅을 이용한 글입력
10. 리액트에서 동적으로 글 생성하기
11. 리액트에서 동적으로 글 수정하기
12. 리액트에서 동적으로 글 삭제하기 삭제버튼