리액트 09: 리액트 토픽변수를 useState 훅을 이용한 글입력

안녕하세요. 각성한 데브키라(devkira)입니다.웹 개발에서 사용자 입력을 처리하는 것은 매우 중요한 부분입니다. 오늘은 리액트의 useState 훅을 사용하여 간단한 텍스트 입력 기능을 구현하는 방법을 소개하겠습니다. 이 예제는 초보자도 쉽게 접근할 수 있도록 설계되었지만, 리액트에서 상태 관리의 핵심 개념을 이해하는 데 있어 매우 중요한 부분입니다.

 

아래에는 실습을 위한 소스 코드와 그 실행 결과를 제공합니다. 이를 통해 리액트의 기본 사용법을 익히는 첫걸음을 떼고, 상태 관리에 대해 더 깊이 파고들어 볼 수 있습니다.

소스코드

App.js

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>[ 상세정보 ]</h2>
    <p>{porps.id}</p>
    <p>{porps.title}</p>
    <p>{porps.body}</p>
  </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} (id:{t.id})</a>
    </li>)
  }
  return <nav>
    <ol>
      {list}
    </ol>
  </nav>
}

function Create(props){
  return <article>
    <h2>Create</h2>
    <form onSubmit={e=>{
      e.preventDefault();
      const title = e.target.title.value;
      const body = e.target.body.value;
      props.onCreate(title, body);
    }}>
      <p><input type='text' name='title' placeholder='title'/></p>
      <p><textarea name='body' placeholder='body'/></p>    
      <p><input type='submit' value='전송'/></p>
    </form>
  </article>
}

function App() {
  const [mode, setMode] = useState('WELCOME');
  const [id, setId] = useState(null);
  const [topics, setTopics] = useState([
    {id: 0, "title":"블랙핑크", body:"블랙핑크 good!"},
    {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!"}
  ]);

  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 id={id} title={title} body={body}></Article>
  }else if(mode === "CREATE"){
    content = <Create onCreate={(title, body)=>{
      const newId = topics.length;
      const item = {id:newId, title:title, body:body};
      const list = [...topics];
      list.push(item);
      setTopics(list);
      setId(newId);//상세정보출력을 위해서 새로추가되는 글의 id가 무엇인지 알려줍니다.
      setMode("READ");//목록이 추가되고 추가된 내용의 상세페이지를 보여주기 위해서 READ모드로 변경
    }}></Create>
  }

  return (
    <div>
        <Header title="WEB" onChangeMode={()=>{
          setMode("WELCOME");
        }}></Header>
        <Nav topics={topics} onChangeMode={(id)=>{
          setMode("READ");
          setId(id);
        }}></Nav>
        {content}
        <br/>
        <a class="action-link" href="/create" onClick={event=>{
          event.preventDefault();
          setMode('CREATE');
        }}>추가</a>
    </div>
  );
}

export default App;

 

 

실행결과

결과

이 예제가 리액트 학습 과정에서 도움이 되었기를 바랍니다. 이 부분은 단순하지 않으며 다소 도전적일 수 있지만, 리액트를 이해하는 데 있어 핵심적인 요소입니다. 이 개념을 이해하면 리액트에 대한 전반적인 이해가 향상될 것입니다. 앞으로 리액트 프로젝트를 진행하면서 오늘 배운 내용을 적극적으로 활용해 보세요. 더 많은 실습과 경험을 통해 리액트의 다양한 기능과 패턴에 대해 더 깊이 이해하게 될 것입니다. Happy coding!

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

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