useState와 props 이해하기

useState 사용하기

import React, { useState } from 'react';
import Tweet from '../Components/Tweet';
import './Tweets.css';
import dummyTweets from '../static/dummyData';

const Tweets = () => {
  const [username, setUsername] = useState('parkhacker');
  const [msg, setMsg] = useState('');
  const [tweets, setTweets] = useState(dummyTweets);
  const [filteredTweets, setFilteredTweets] = useState(dummyTweets);
  const [isFiltered, setIsFiltered] = useState(false);
  const [currentUsername, setCurrentUsername] = useState('default');

Tweets.js 에서 useState를 사용한 부분입니다.
useState의 사용 방법은 다음과 같습니다.

const [username, setUsername] = useState('parkhacker');

위 코드를 예시로 들면 username에 내가 원하는 값이 들어가고 setUsername은 username을 변경시키는 함수입니다. 그리고 useState를 사용해 username에 초기값을 넣어줍니다.

setState 사용하기

  const handleButtonClick = (event) => {
    const tweet = {
      id: shortid(),
      username: username,
      picture: 'https://randomuser.me/api/portraits/men/98.jpg',
      title: 'new Tweet',
      content: msg,
      createdAt: new Date().toLocaleDateString('ko-KR'),
      updatedAt: new Date().toLocaleDateString('ko-KR'),
    };
    const newTweets = [tweet, ...tweets];
    setTweets(newTweets);
  };

위 handleButtonClick함수는 tweet객체에 유저 정보를 넣고 newTweets 배열의 앞에 추가해줍니다. 이 때 스테이츠 변경 함수인 setTweets가 쓰입니다.
setTweets의 사용법은 tweets가 변경 될 값을 ()안에 넣어주면 됩니다.

  const handleChangeUser = (event) => {
    setUsername(event.target.value)
  }

위 코드는 username을 작성하는 input의 값이 변경 되었을 때 username을 변경된 값에 맞게 적용하는 함수 입니다.

<input
  type="text"
  value={username}
  onChange={handleChangeUser}
  placeholder="your username here.."
  className="tweetForm__input--username"
></input>

위 코드와 같이 컴포넌트의 return문 안에서 사용이 가능합니다.

 const tweetsRenderer = (tweet, idx) => {
    return (
      <Tweet
        key={tweet.id}
        tweet={tweet}
        handleDeleteTweet={handleDeleteTweet}
        idx={idx}
      />
    );
  }

위 코드는 tweet을 랜딩해준다 이 때 <Tweet/>컴포넌트에 key, tweet, handleDeleteTweet, idx속성을 넘겨주는데 이것을 props라 합니다.
props는 읽기 전용이며, 이 이유는 사이드 이펙트를 최소화 하고, 원본 데이터를 유지하기 위해 사용됩니다.
useState와 props를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유할 수 있습니다.