[Project] React 컴포넌트 만들기 (3)

Project

팀 프로젝트 컴포넌트 만들기

React 팀 프로젝트

컴포넌트 만들기

Detail Components

<Comment>
  <span>코멘트</span>
  {comment.length > 150 ? (
    <>
      {commentShort ? (
        <p>
          {`${comment.slice(0, 150)}...`}
          <button onClick={toggleComment}>더 보기</button>
        </p>
      ) : (
        <p>
          {comment}
          <button onClick={toggleComment}>숨기기</button>
        </p>
      )}
    </>
  ) : (
    <p>{comment}</p>
  )}
</Comment>

코멘트가 무한히 길어질 수는 없을 것 같아서 일단 150자 정도로 자르고

더보기와 숨기기 기능을 추가하였다.

Indicator

나타내는 숫자는 돈이므로 천단위마다 ,을 찍어주는 것이 가독성에 좋다.

따라서 number.toLocaleString 을 사용하여 천 단위 마다 ,를 나타냈다.

ChatForm

const ChatForm = ({ onSubmit }) => {
  const [chatContent, setChatContent] = useState("");

  const onChange = (e) => setChatContent(e.target.value);

  return (
    <form onSubmit={onSubmit}>
      <TextInput
        placeholder="채팅 내용을 입력하세요."
        onChange={onChange}
        value={chatContent}
      />
      <Button shortBtn content="보내기" />
    </form>
  );
};

상위 컴포넌트에서 이 ChatForm에서의 input에 있는 값을 가져가야 하기 때문에 onSubmit 함수를 밖에서 받아와야 한다.

const handleChatSubmit = (e) => {
  e.preventDefault();
  console.log(e.target[0].value);
};

return <ChatForm onSubmit={handleChatSubmit} />;

이런 식으로 사용해야 한다. e.target은 form 으로 자식 요소(input, button) 중 가장 처음에 있는 input 요소의 value를 가지고 온다.