onChange 이벤트(+이벤트 버블링 막기)

# 시작하면서

이전에 배운걸 복습겸 새로 다 짜봤고 뭐 디자인도 다르니 혼동을 안하길 바란다

솔까말 이 블로그 나만 보는거라..뭐..

 

# 일단 이렇게 생겼다.

<input type="text" onChange={handleTitle} />

인풋 태그에다가 onChange옵션을 달아주었고 그곳에 handleTitle함수를 지정해줬다.

 

예전에 vue를 사용할때는 input에다가 v-model을 사용했던것 같은데

react의 방식이 조금 더 복잡한 듯 하다.

컴포넌트는 비교적 쉬웠던만큼 데이터바인딩이나 인풋데이터값을 쓰는거는 더 어렵고 뭐 이런거겠지?

근데 vue reactive도 갖다쓴거니 react도 이런 메서드가 있지않을까 쉽기도 하고..

암튼 뭐 지금 배우는 입장에서는 아 그렇구나 하고 배울뿐

 

 

# 암튼 저게 뭐냐?

<input type="text" onChange={handleTitle} />

handleTitle함수를 onChange에 넣어줬는데 저 함수는 아래와 같이 생겼다.

  const handleTitle = (event) => {
    setTitle(event.target.value);
  };

handleTitle이라는 함수에는 매개변수를 받는데 event라는 매개변수를 받는다.

저기에 인풋값이 넣어진다?정도로만 알고 넘어가면 될것같다.

때문에 인풋값이 변경될때마다 handleTitle함수가 호출된다는 소리임.

그럼 setTitle로 title이라는 변수(state)를 수정하게 된다.

 

강의에서는 함수리터럴로

<input type="text" onChange={(e)=>{e.target.value}} />

이렇게 바로 넘겨줬따.

사실 아래 방법이 더 나은것 같다.

 

onChange의 event 첫번째 매개변수로 받는거에서 어떤 기능이 더 있는지 더 알아보면 좋을듯

 

암튼 그렇게 하고 

대충 title이라는 변수(state)를 태그 아무데나 넣어보면

v-model에서 했던것처럼 입력값을 바꾸면 똑같이 따라 바뀌는걸 확인 할 수 있다.

 

 

빌드 할 경우 어떻게 빌드한 코드가 튀어나오는지 모르겠지만 onChange로 보자면 계속 입력이 있을때마다 함수가 두번 호출되는거라 좀 무거울듯 하다.. vue는 뭔가 되게 가벼워보였는데 useState도 그렇고 react는 좀 무거워보임.

 

 

# 이걸로 글쓰기 기능을 만들어보자. (전체코드)

import './App.css';
import React, { useState } from 'react'; // useState를 임포트

function App() {
  const [posts, setPosts] = useState([
    {
      title: '강남역',
      date: '2024/07/01',
      likeCount: 0,
      content: '강남역 다녀왔어요',
    },
    {
      title: '회현역',
      date: '2024/07/02',
      likeCount: 0,
      content: '회현역 다녀왔어요',
    },
    {
      title: '고디역',
      date: '2024/07/03',
      likeCount: 0,
      content: '고디역 다녀왔어요',
    },
  ]);

  const [state, setState] = useState({
    isPostModal: false,
    postModalIndex: null,
    isWriteModal: false,
  });

  const openPostModal = (i) => {
    const copiedState = { ...state };
    copiedState.postModalIndex = i;
    copiedState.isPostModal = true;
    setState(copiedState);
  };

  const openWriteModal = (i) => {
    const copiedState = { ...state };
    copiedState.isWriteModal = true;
    setState(copiedState);
  };

  const clickLike = (i) => {
    const copiedPosts = [...posts];
    copiedPosts[i].likeCount++;
    setPosts(copiedPosts);
  };

  const deletePost = (i) => {
    const copiedPosts = [...posts];
    copiedPosts.splice(i, 1);
    setPosts(copiedPosts);
  };

  return (
    <div className="App">
      {state.isWriteModal ? (
        <WriteModal
          state={state}
          posts={posts}
          setState={setState}
          setPosts={setPosts}
        />
      ) : null}
      {state.isPostModal ? (
        <PostModal
          state={state}
          posts={posts}
          setState={setState}
          setPosts={setPosts}
        />
      ) : null}

      <nav className="nav-top">
        <p>무찌 앱</p>
        <p>#######</p>
      </nav>
      <div className="lists">
        {posts.map((list, i) => {
          return (
            <div className="list" key={i}>
              <h4
                onClick={() => {
                  openPostModal(i);
                }}
              >
                {list.title}
              </h4>
              <p className="date">{list.date}</p>
              <p
                className="likeBtn"
                onClick={() => {
                  clickLike(i);
                }}
              >
                따봉
              </p>
              <p>{list.likeCount}</p>
              <p
                className="deleteBtn"
                onClick={() => {
                  deletePost(i);
                }}
              >
                삭제
              </p>
            </div>
          );
        })}
      </div>
      <div className="appBtn">
        <p className="writeBtn" onClick={openWriteModal}>
          글쓰기
        </p>
      </div>
    </div>
  );
}

const PostModal = ({ posts, state, setState, setPosts }) => {
  const closeModal = () => {
    const copiedState = { ...state };
    copiedState.isPostModal = false;
    setState(copiedState);
  };

  const edit = () => {
    const copiedPosts = [...posts];
    const editedContent = prompt(
      '새로운 글내용',
      copiedPosts[state.postModalIndex].content,
    );
    if (editedContent) {
      copiedPosts[state.postModalIndex].content = editedContent;
      setPosts(copiedPosts);
    }
  };
  return (
    <div className="detailPost-back">
      <div className="detailPost">
        <div className="title">
          <h4>{posts[state.postModalIndex].title}</h4>
          <p>{posts[state.postModalIndex].date}</p>
        </div>
        <div className="inner-back">
          <div className="inner-front">
            <p>{posts[state.postModalIndex].content}</p>
          </div>
        </div>
        <div className="btn-box">
          <p className="btn" onClick={edit}>
            수정
          </p>
          <p className="btn" onClick={closeModal}>
            닫기
          </p>
        </div>
      </div>
    </div>
  );
};

const WriteModal = ({ posts, state, setState, setPosts }) => {
  const closeModal = () => {
    const copiedState = { ...state };
    copiedState.isWriteModal = false;
    setState(copiedState);
  };

  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const getCurrentDate = () => {
    const today = new Date();

    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1 필요
    const day = String(today.getDate()).padStart(2, '0');

    return `${year}/${month}/${day}`;
  };

  const write = () => {
    const copiedPosts = [...posts];
    const newPost = {};
    newPost.title = title;
    newPost.content = content;
    newPost.date = getCurrentDate();
    newPost.likeCount = 0;
    copiedPosts.unshift(newPost);
    if (newPost.title) {
      setPosts(copiedPosts);
      closeModal();
    } else {
      closeModal();
    }
  };

  const handleTitle = (event) => {
    setTitle(event.target.value);
  };

  const handleContent = (event) => {
    setContent(event.target.value);
  };

  return (
    <div className="write-back">
      {title}
      <div className="detailPost">
        <div className="title">
          <input type="text" onChange={handleTitle} />
        </div>
        <div className="inner-back">
          <div className="inner-front">
            <textarea onChange={handleContent}></textarea>
          </div>
        </div>
        <div className="btn-box">
          <p className="btn" onClick={write}>
            확인
          </p>
          <p className="btn" onClick={closeModal}>
            닫기
          </p>
        </div>
      </div>
    </div>
  );
};

export default App;

 

강의 듣기전에 미리만들어보니까 이렇게 됐다.

일단 모달이 글 클릭하면 띄워지는 모달 하나였는데 글쓰기 모달을 새로 만들어줬고

제목은 input, 내용은 textarea로 만들어줬다.

각 onChange 이벤트핸들러?를 연결해줬다.

그럼 handle머시기 함수를 호출해주는데 여기엔 set머시기 하면서 해당 input내용을

해당 데이터로 바꿔준다.

이 데이터를 저장해놨다가 확인 버튼 누르면 posts어레이에 해당 글 오브젝트가 새로 생긴다.

 

 

 

*주의 사항

<input/>

인풋태그 만들때 일반적으론 <input>을 사용했는데 react에서는 /로 반드시 끝내줘야한다.

 

+ 이벤트버블링 없애기

              <h4
                onClick={() => {
                  openPostModal(i);
                }}
              >

위에 게시글 제목 누르면 게시글 내용뜨는 모달 뜨게 만든 기능이 있다.

제목을 누르면 openPostModal이라는 함수가 호출되게 했는데

사실 처음에는 그냥 글 전체적인걸 누르면 함수 호출되게 하려고 헀다.

근데 문제가

저 박스 전체를 누르면 

해당 게시글 모달이 떠야하는데 

'따봉'버튼만 눌러도 저 모달이 뜬다.

따봉버튼만 눌러지게 하고 싶다면

              <p
                className="likeBtn"
                onClick={() => {
                  clickLike(i);
                }}
              >
                따봉
              </p>

해당 따봉버튼의 onClick 이벤트핸들러 함수 리터럴에

event.stopPropagation메서드도 호출되게 해버리면 된다.

            <div
              className="list"
              key={i}
              onClick={() => {
                openPostModal(i);
              }}
            >
              <h4>{list.title}</h4>
              <p className="date">{list.date}</p>
              <p
                className="likeBtn"
                onClick={(event) => {
                  event.stopPropagation();
                  clickLike(i);
                }}
              >
                따봉
              </p>
              <p>{list.likeCount}</p>
              <p
                className="deleteBtn"
                onClick={() => {
                  deletePost(i);
                }}
              >
                삭제
              </p>
            </div>

이렇게 다시 제목에만 있던 모달창 이벤트를 그냥 전체 박스로 다시 바꾸고

따봉버튼에 event.stopPropagation메서드도 호출되게 하면

원하듯이 이벤트버블링을 막아준다.

 

 

 

 

+ part1 최종정리

리액트 초급을 배우면서 대충 중요한점들을 적어보자면

• useState로 변수관리를 하면 데이터바인딩이 된다.
• useState를 바꾸려면 set머시기 함수를 호출하고 인수로 바뀌게 해줘야한다.(ㅈ같음)
• set머시기 함수를 쓸때 객체나 어레이 요소하나 수정할떄는 보통 얕은복사를 해서 쓴다(스프레드문법)
• 컴포넌트는 쉽다. 데이터넘겨주기도 간단하다.
• 반복문은 map을 사용한다
• onClick으로 클릭시 실행할 코드를 연결할 수 있다.
• onClick에는 단순한 함수는 그냥 함수리터럴이 할당된 변수 넣어주면 되고 매개변수가 있는 함수면 부모함수로 한번 더 감싸서 변수를 넘겨주자.
• onChange로 바뀌는 데이터를 관리할 수 있다.

 

머 더 있을수도?

사실 아직까진 vue를 사용해본 경험이 많아서 크게 어려운점이 없는듯.

여기까지 배운내용만으로도 간단한 어플하나 만들 수 있을것 같다.