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値を取得して빈 하트または채워진 하트を表示するとき!<i />ラベルごとにdisplay: none;のclassNameを追加するのではありません!いっそ3つの演算子を使って、条件に合ったラベル自体を画面に表示させると、コードがより簡潔になります.✨

이전에 작성해줬던 코드

<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省略!

自分の公衆から持ってきた内容であれば、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") ✨

▼論理がより効率的!

3つの演算子の位置を少し変えると、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をそれぞれこのように扱う関数があり、、、

수정한 코드

name attributeを励起イベントの各inputに追加します.その名前はstateのキー値と同じです.その後、対応するキー値(name)に基づいてStateを設定し、関数を1つに縮小できます.👏🏻

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

☁️ image import

画像をインポートするときに、ファイルの上部がインポートされすぎて乱れている場合は、次の方法を使用します.
①images.jsファイルを作成してインポートします.
②輸入品を別々に輸出する.
③画像が必要なファイルにインポートして使用すると、きれいに管理できる🙂

// 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"