React State 예제 (State Lifting State Up Hooks 예제, Effect hook)

 🎟 Lifting State Up

import React, { useState } from "react";
import "./styles.css";

const currentUser = “박소영”;

function Twittler() {
  const [tweets, setTweets] = useState([
    {
      id: 1,
      writer: “parksoyoung”,
      date: "2020-11-1”,
      content: "안녕 리액트"
    },
    {
      id: 2,
      writer: “박소영”,
      date: "2020-11-1”,
      content: “리액트 너 좀 어렵다?”
    },

  ]);

  const addNewTweet = (newTweet) => {
    setTweets([...tweets, newTweet]);
  }; // 이 상태 변경 함수가 NewTweetForm에 의해 실행되어야 합니다.

  return (
    <div>
      <div>작성자: {currentUser}</div>
      <NewTweetForm onButtonClick={addNewTweet} />
      <ul id="tweets">
        {tweets.map((el) => (
          <SingleTweet key={el.uuid} writer={el.writer} date={el.date}>
            {el.content}
          </SingleTweet>
        ))}
      </ul>
    </div>
  );
}

function NewTweetForm({ onButtonClick }) {
  const [newTweetContent, setNewTweetContent] = useState("");

  const onTextChange = (e) => {
    setNewTweetContent(e.target.value);
  };

  const onClickSubmit = () => {
    let newTweet = {
      uuid: Math.floor(Math.random() * 10000),
      writer: currentUser,
      date: new Date().toISOString().substring(0, 10),
      content: newTweetContent
    };
    onButtonClick(newTweet);
    // TDOO: 여기서 newTweet이 addNewTweet에 전달되어야 합니다.
  };

  return (
    <div id="writing-area">
      <textarea id="new-tweet-content" onChange={onTextChange}></textarea>
      <button id="submit-new-tweet" onClick={onClickSubmit}>
        새 글 쓰기
      </button>
    </div>
  );
}

function SingleTweet({ writer, date, children }) {
  return (
    <li className="tweet">
      <div className="writer">{writer}</div>
      <div className="date">{date}</div>
      <div>{children}</div>
    </li>
  );
}

export default Twittler;

🎟 Effect Hook -기본  useEffect & useState 연습

import { useEffect, useState } from "react";


export default function ParentComponent() {
  const proverbs = [
    "좌절감으로 배움을 늦추지 마라",
    "Stay hungry, Stay foolish",
    "Memento Mori",
    "Carpe diem",
    "배움에는 끝이 없다" 
  ]

  const [idx, setIdx] = useState(0)

  const dd = () => {
    setIdx(idx === proverbs.length-1 ? 0 : idx + 1)
  } 
  return (
    <div>
      <button onClick ={dd}>명언제조</button>
      <Proverb saying = {proverbs[idx]}/>
    </div>
  )
}
function Proverb ({saying}) {
useEffect(() => {
  document.title = saying
})
  

  return (
    <div>
      <h3>오늘의 명언</h3>
      <div>{saying}</div>
    </div>
  )
}

 

🎟 Effect Hook - 조건부 실행

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}