Westagram Refactoring! 🔧

☁️ 부모 함수에게 인자전달하기

자식컴포넌트에서 부모로부터 props를 통해 전달받은 메소드를 호출할때, 인자를 함께 전달하면서 호출 할 수 있다! ✨

• 자식 컴포넌트

import React, { Component } from "react";
import "./Comment.scss";

class Comment extends Component {
  render() {
    return (
      <div className="Comment">
        {this.props.commentList.map((comment) => {
          return (
            <li key={comment.id}>
              <div>
                <a href="#">{comment.userName}</a>
                <span>{comment.content}</span>
              </div>
              <div>
                <i
                  // id={comment.id}
                  className="fas fa-trash"
                  onClick={() => this.props.deleteComment(comment.id)}  
                  	   //🔥 이렇게 arrow function을 이용해서 보내주면 된다.
                />
                <i
                  className={comment.isLiked ? "hidden" : "far fa-heart unlike"}
                />
                <i
                  className={comment.isLiked ? "fas fa-heart like" : "hidden"}
                />
              </div>
            </li>
          );
        })}
      </div>
    );
  }
}

export default Comment;

👏🏻 그럼 부모컴포넌트에 있는 함수는 이렇게 전달받은 인자를 이용해 연산을 처리시키면 된다.

• 부모 컴포넌트

  deleteComment = (id) => {
    const remainComment = this.state.commentList.filter((comment) => {
      return comment.id !== Number(id);
    });
    this.setState({
      commentList: remainComment,
    });
  };

🤔 처음에 나는 this.props.deleteComment(comment.id)
→ 이렇게 바로 전달하려고 했는데 자꾸 전달이 실패해서 이벤트가 발생하는 이벤트에 굳이 id값을 주어서 e.target.id 를 이용해 filter함수를 처리했는데 이렇게 안해줘도 된다!!!! 🙅🏻‍♀️🙅🏻‍♀️🙅🏻‍♀️

---

☁️ isLike 상태에따라 다른 아이콘 보여주기

좋아요 버튼처럼 state 로부터 boolean 값을 받아와 빈 하트 or 채워진 하트 를 보여줘야 할 때! 각각의 <i /> 태그에 display: none; 을 해주는 className 을 추가하는게 아니라! 아예 삼항연산자들 통해 조건에 맞는 태그 자체를 화면에 띄워줄 수 있게 하면 조금 더 코드가 깔끔해진다! ✨

• 이전에 작성해줬던 코드

<i className={comment.isLiked ? "hidden" : "far fa-heart unlike"} />
<i className={comment.isLiked ? "fas fa-heart like" : "hidden"} /> 

• 수정한 코드

comment.isLiked 
  ? (<i className="fas fa-heart like" />) 
  : (<i className="far fa-heart unlike" />)

• 해당 부분 전체 코드

<div className="Comment">
        {this.props.commentList.map((comment) => {
          return (
            <li key={comment.id}>
              <div>
                <a href="#">{comment.userName}</a>
                <span>{comment.content}</span>
              </div>
              <div>
                <i
                  className="fas fa-trash"
                  onClick={() => this.props.deleteComment(comment.id)} />
                {comment.isLiked 
                  ? (<i className="fas fa-heart like" />) 
                  : (<i className="far fa-heart unlike" /> )}
              </div>
            </li>
          );
        })}
      </div>

---

☁️ localhost:3000 생략!

자기 자신의 public에서 가져오고 있는 내용이라면 http://localhost:3000/ ← 이 부분을 생략해줄 수 있다.

  componentDidMount() {
    fetch("http://localhost:3000/data_saemsolyoo/commentData.json")
      .then((res) => res.json())
      .then((data) => {
        console.log();
        this.setState({
          commentList: data,
        });
      });
  }

→ fetch("/data_saemsolyoo/commentData.json") ✨

---

☁️ 로직을 조금 더 효율적으로!

삼항 연산자의 위치를 조금 바꿔 준다면 if문을 사용하지 않고, setState도 하나만 쓰면서! 같은 로직을 작성해줄 수 있다! 🙂

• 이전에 작성해줬던 코드

  activeSubmitBtn = (e) => {
    if (e.target.value.length > 0) {
      this.setState({ disabled: false });
    } else {
      this.setState({ disabled: true });
    }
  };

• 수정한 코드

activeSubmitBtn = (e) => {
    this.setState({ disabled: e.target.value.length > 0 ? false : true });
  };

---

☁️ 함수줄이기

🤔 뭔가 코드가 반복되는것 같다면..? 줄여줄 수 있다!!

• 이전에 작성해줬던 코드

  handleIdInput = (e) => {
    const userId = e.target.value;
    this.setState({
      id: userId,
    });
  };

  handlePwInput = (e) => {
    const userPw = e.target.value;

    this.setState({
      pw: userPw,
    });
  };

→ 이렇게 ID. PW를 다루는 함수들이 각각 있었다,,,

• 수정한 코드

이벤트를 발생시키는 각각의 input에 name attribute를 추가해주고 그 name은 state의 key값과 똑같이 해준다! 그럼 해당 key값(name)에 따라 setState가 되어 함수를 하나로 줄여줄 수 있다. 👏🏻

  handleInput = (e) => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    });
  };

---

☁️ image import

이미지를 import 해줄 때 너무 많은 import로 파일 상단이 지저분해 보인다면 다음과 같은 방법을 이용할 수 있다.

① images.js 파일을 만들어 다 import 해준다.
② 그리고 import 해준 것들을 각각 export 해준다.
③ 이미지가 필요한 파일에서 import 해 사용하면 깔끔하게 관리할 수 있다 🙂

// images.js
import menu from '../../../../../images/saemsolyoo/Main/menu.svg';
import heart from '../../../../../images/saemsolyoo/Main/heart.svg';
import send from '../../../../../images/saranglee/Main/send.svg';
import bookmark from '../../../../../images/saemsolyoo/Main/bookmark.svg';
import comment from '../../../../../images/saemsolyoo/Main/comment.svg';

export const images = { menu, heart, send, bookmark, comment }

// Feed.js
import { menu, heart, send, bookmark, comment } from "./images"