🎯 Achievement Goals

리액트로 Twittler 만들기

👉 React-Twittler

오늘은 React 공식문서를 읽고 Twittler를 구현하는게 과제였다. 음… React를 틈틈이 배워놓지 않았다면 개념잡는데 정말 오랜 시간이 걸렸을 것이다. 강의를 많이 듣고 온 상태라 공식문서를 봐도 이해가 잘 되었다!!

과제 내용

react-twittler

위 사진처럼 구현을 하고, 실제로 트윗을 남기면 트윗이 남도록 하는 것이 과제였다!!!

하지만.. 저렇게만 하면 너무 쉬울 것 같아서.. 나만의 방식대로 컴포넌트들을 더 많이 추가해서 nav도 추가하고 삭제기능, 필터기능, 리셋기능을 추가로 구현하였다.

댓글추가 기능

react-twittler_렌더링

이번 스프린트에서는 class와 함수형을 둘 다 사용하게 했다. App.js에서는 class를 사용하였다. 그래서 state에서 event를 줄 때 spread syntax를 사용하여 댓글들을 추가해주었다.

class App extends Component {
  state = {  
    tweets: [
      {
        id: 1,
        writer: "김코딩",
        date: "2020-10-10",
        content: "안녕 리액트"
      },
      {
        id: 2,
        writer: "박해커",
        date: "2020-10-12",
        content: "좋아 코드스테이츠!"
      }
    ]
  };

    handleAdd = (content) => {
    const tweets = [{
      id: Date.now(), 
      writer: "우성짱123", 
      date: day,
      content}, 
      ...this.state.tweets];
    this.setState({ tweets });
  }

    render() {
    return (
      <>
        <Tweets 
          tweets={this.state.tweets}
          onAdd={this.handleAdd}
          onDelete={this.handleDelete}
          onReset={this.handleReset}
          onFilter={this.handleFilter}
          />
      </>
    )
  }
}

필터 기능을 위해 필요한 App.js의 코드만 보면 이렇다. 다른 컴포넌트에도 클릭이벤트를 넘겨주었다. 그리고 state가 업데이트가 되면 꼭 setState를 사용하자!

setState는 state의 기본 값을 바꾸기 위해서는 꼭 거쳐야 하는 과정이다. 리액트에서 이 함수가 호출이 되면 리렌더링이 되도록 설계가 되어있기 때문이다.

리셋기능

react-twittler_리셋 gif

리셋 기능은 state에 있는 값들을 전부 지워주었기 때문에 어렵지 않았다.

  handleReset = () => {
    const tweets = [...this.state.tweets];
    tweets.length = 0;
    this.setState( { tweets });
  }

react-twittler_삭제 gif

삭제기능은 유튜브 드림코딩 엘리님의 강의를 듣고 배운 것을 활용했다. filter 함수를 이용해서 클릭된 id가 아닌 것들만 남겨주었다.

  handleDelete = tweet => {
    const tweets = this.state.tweets.filter(item => item.id !== tweet.id);
    this.setState({ tweets });
  }

필터기능

react-twittler_필터

필터기능은 삭제기능과 똑같이 filter 함수를 사용하였다. 작성자의 이름을 클릭했을 때 이벤트를 주어야 하기 때문에 타겟의 작성자이름과 같은 것만 남겨주었다.

  handleFilter = (tweet) => {
    const tweets = this.state.tweets.filter(item => item.writer === tweet.writer);
    this.setState( {tweets });
  }

👉 Ref

Ref는 이번 과제를 할 때 배운 것은 아니고 내가 따로 공부했을 때 배웠는데, 이번 과제에 활용을 해보았다! 그래서 사용한 부분에 대해 블로깅을 해보려고 한다.

먼저 Ref이란? 리액트에서 직접 DOM에 접근을 해야할 때 사용되는 것이라고 보면 된다.

예를 들어, input 태그에 Ref를 사용해서 inputRef라는 변수를 넘기게 되면, inputRef객체의 current 속성을 통해서 input 태그에 접근을 할 수가 있다.

<input ref={inputRef}>

나도 input에 포커싱할 때 사용했는데 이 외에도 필요한 상황이 몇가지 더 있었다.

input / textarea 등에 포커스를 해야 할때
특정 DOM 의 크기를 가져와야 할 때
특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때
외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때

내 코드로 더 살펴보자면

import React, { memo } from 'react';

// 리렌더링 방지를 위해 memo를 사용하였다.
const TweetAddForm = memo ((props) => {
    //Ref 생성를 생성해야 한다.
    const formRef = React.createRef();
    const inputRef = React.createRef();

    const onSubmit = event => {
        event.preventDefault();
        //inputRef.current를 사용하면 현재 입력된 값을 가져온다.
        const writer = inputRef.current.value;
        writer && props.onAdd(writer);
        formRef.current.reset();
    }

    return (
        <div>
            <form ref={formRef} className="add-form" 
            onSubmit={onSubmit}>
                <input ref={inputRef}
                type="text"
                className="add-input"
                placeholder="무슨 일이 일어나고 있나요?"
                />
// -----------------생략---------------------
}

🙌 느낀점

이렇게 twittler 구현이 끝이 났다~~~!!!!!

그동안 조금씩 배워왔던 리액트를 이렇게 하루만에 다 활용할 수 있어서 기분이 너무 좋았다!! 현재는 youtube API를 불러와서 클론 코딩하고 있었는데 내일 과제가 youtube 클론 코딩이였다….

내일은 페어분과 함께 youtube 클론 코딩을 하는게 과제이다. 내가 지금 혼자 하고 있는 거랑 다른 점은 과제에는 이미 youtube 더미데이터(가짜데이터)가 있었고, 이것을 활용해서 클론하는 것이였다. 그리고 기능구현이 몇가지 안되기 때문에 할만할 것 같다.

내일도 잘 해낼 수 있을거라고 믿는다~!

👊 내일의 TIW(today I Will)

React-youtube 클론

← Previous Post Next Post →

React-Twittler 만들기

📅 TIL #55