Westagram React

🔥 구현 할 내용

1. 사용자 입력 데이터 저장 기능 구현
2. 로그인 버튼 활성화 기능 구현
3. 댓글 기능 구현
4. 댓글 컴포넌트화, Props로 데이터 전달 구현

💡핵심 코드

1. 사용자 입력 데이터 저장 기능

: id와 pw input에 change 이벤트 발생시 event.target.value를 받아 set함수에 저장, input의 value값으로 저장해주어 나중에 유효성 검사를 할 때에 그 값을 이용할 수 있도록 설정.

const [idValue, setIdValue] = useState('');
const [pwValue, setPwValue] = useState('');
const savedUserId = event => {
    setIdValue(event.target.value);
  };
const savedUserPw = event => {
    setPwValue(event.target.value);
  };

<div className="inputs">
     <input
       id="idInput"
       type="text"
       value={idValue}
       placeholder="전화번호, 사용자 이름 또는 이메일     
       onChange={savedUserId}
     />
     <input
       id="pwInput"
       type="password"
       value={pwValue}
       placeholder="비밀번호"
       onChange={savedUserPw}
     />
 </div>

2. 로그인 버튼 활성화

: navigate는 항상 버튼을 눌렀을 때 이동하도록 설정.
id와 pw가 조건을 만족하면 active, active하다면 button의 disabled를 false로 active하지 않다면 true로 변경하여 버튼의 활성화 변경. active에 따라 class를 추가하여 background-color 변경.

const active = idValue.includes('@') && pwValue.length > 4;
const navigate = useNavigate();
const handleClickEvent = () => {
    navigate('/main_jiyeonSeo');
  };

<button
   className={'loginBtn' + (active ? ' unBlocked' : ' blocked')}
   disabled={!active}
   onClick={handleClickEvent}
>
   로그인
</button>

3. 댓글 기능

: 댓글 input에 change 이벤트 발생시 input의 value로 입력된 값 저장.
submit 발생시 자동으로 새로고침되지 않도록 preventDefault설정, input값이 없다면 제출되지 않도록 return 설정, 댓글들은 map함수 사용예정이기 때문에 배열로 저장.
input의 값이 비어있지 않을 경우 색 변경되도록 버튼 설정.
submit하여 값이 들어오면 map함수 사용하여 comment와 index를 뽑아내서 댓글로 입력될 수 있도록 함.
좋아요와 삭제기능은 각 event를 읽어낼 수 있어야 하기 때문에 event.target을 사용.

const [input, setInput] = useState('');
const [comments, setComments] = useState([]);
const [like, setLike] = useState(false);
let readyToClick = input !== '' ? true : false;

const onChange = event => {
  setInput(event.target.value);
 };

const onSubmit = event => {
  event.preventDefault();
  if (input === '') {
     return;
  }
  setComments(prev => [...prev, input]);
  setInput('');
  };
const handleHeartClick = event => {
  setLike(prev => !prev);
  like
    ? (event.target.src = './images/41_jiyeon/heart-fill.png')
    : (event.target.src = './images/41_jiyeon/heart.png');
  };
const handleDeleteClick = event => {
    event.target.parentElement.remove();
  };

{comments.map((comment, index) => (
  <li key={index}>
   <span className="bold">mia_seo</span>
   <span>{comment}</span>
   <img
     onClick={handleHeartClick}
     className="heart"
     src="./images/41_jiyeon/heart.png"
     alt="하트"
   />
   <span className="gray">42분 전</span>
   <span className="delete gray" onClick={handleDeleteClick}>
    삭제
   </span>
</li>
))}
<form id="comment" onSubmit={onSubmit}>
   <input
     onChange={onChange}
     id="commentInput"
     type="text"
     placeholder="댓글달기"
     required
     value={input}
   />
   <button
     style={readyToClick ? { color: '#2099f1' } : { color: '#c5e1fb' }}
          >
      게시
    </button>
</form>

4. 댓글 컴포넌트화, props로 데이터 전달

: Content에서 map 함수를 작동시켜서 Comment 컴포넌트로 전달.

function Comment({ comment, index }) {
  const [like, setLike] = useState(false);

  const handleHeartClick = event => {
    setLike(prev => !prev);
    like
      ? (event.target.src = './images/41_jiyeon/heart-fill.png')
      : (event.target.src = './images/41_jiyeon/heart.png');
  };

  const handleDeleteClick = event => {
    event.target.parentElement.remove();
  };
  
function Comtent() {
  {comments.map((comment, index) => (
      <Comment comment={comment} key={index} />
   ))}
  }

🌱성장한 부분

• 배열을 추가할 때 [...comment, input]은 아래에서 위로 댓글이 추가 되고 [input, ...comment]는 위에서 아래로 댓글이 추가된다.
• 댓글 컴포넌트를 만들 때에는 map을 돌린 후 props로 넘겨주어야 삭제와 좋아요 기능을 각각 실행 시킬 수 있다.
• array.map(callback(currentValue[, index]))