👀반딧불이 과제제출

요 근래 react를 계속 열심히 익히는중이다😎
잠자는 시간이 아까운게 이런 기분일까😔 후후...

아무튼 각설하고, react에서 가장 헷갈리는 점은 아무래도 props랑 useState가 아닐까 싶다.
두 요소의 개념적인 차이점은,

• state : 변할 수 있는 값, 유동적 , 컴포넌트 사용 중 내부에서 변할 수 있는 값
• props : 외부로부터 전달받은 값, 함부로 변경될 수 없는 읽기전용객체

react에서는 props,useState사용이 빈번한만큼, 중요한 개념이 아닐수없다.

밑의 코드들은 트위터의 내용을 간단하게 구현해본건데, 작성자가 적은 form을 트윗에 포함시켜서 내보내는 기능을 구현했다.

이번 과제의 코드를 예로 들어 내가 알게된 점을 쭉 적으며 상기시켜봐야겠다.
❌코드 안에 있는 //숫자는 무시해주세요! 설명을 덧붙이려고 코드에 직접 삽입한 숫자입니다.

//App.js
import React from 'react';
import {BrowserRouter, Routes, Route} from 'react-router-dom';//1

import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import About from './Pages/About';
//2
import './App.css';
import './global-style.css';


const App = (props) => {
  return (
    <BrowserRouter>
    <div className="App">
      <main>
        <Sidebar />
        <section className="features">
         
          <Routes>
            <Route path='/' element={<Tweets />} />
            <Route path='/about' element={<About />}/>  
            <Route path='/mypage' element={<MyPage />} />
          </Routes>
        </section>
      </main>
    </div>
    </BrowserRouter>
  );
};

export default App;

• //1 : react에 필요한 {BrowserRouter, Routes, Route}을 import
• //2 : 각각의 컴포넌트들을 import로 가져와서 Routes 안에 Route로 불러오고 있다.

//Tweet.js
import React from 'react';
import './Tweet.css';

const Tweet = ({ tweet }) => { //1
  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');

  return (
    <li className="tweet" id={tweet.id}>
      <div className="tweet__profile">
        <img src={tweet.picture} />
      </div>
      <div className="tweet__content">
        <div className="tweet__userInfo">
          <div className="tweet__userInfo--wrapper">
            <span className='tweet__username'>{tweet.username}</span>
            <span className='tweet__createdAt'>{parsedDate}</span>
          </div>
        </div>
        <div className="tweet__message">
          {tweet.content}
        </div>
      </div>
    </li>
  );
};

export default Tweet;

• 위의 코드는 트윗의 형식을 나타내고 있다. Tweet을 default하고 다른 컴포넌트에서 prop으로 사용할 수 있는 구조다.
  const Tweet = ({ tweet }) 부분을 자세히 살펴보면, 다른 컴포넌트에서
  Ex) <Tweet tweet={something} /> 와 같이 사용가능하다.

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

const Tweets = () => {
  const [tweets, setTweets] = useState(dummyTweets) //1
  const [username, setUsername] = useState("");
  const [msg, setMsg] = useState("");
  const getRandomNumber = (min, max) => {
    return parseInt(Math.random() * (Number(max) - Number(min) + 2));
  };

  const handleButtonClick = (event) => {
    const tweet = {//2
      id: tweets.length + 1,
      username: username,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: msg,
      createdAt: new Date().toLocaleDateString('ko-kr'), 
      updatedAt: new Date().toLocaleDateString('ko-kr'),
    };

    console.log([tweets])
    console.log([tweet,...tweets])  //그냥 tweet로 쓰면  배열, 객체, 문자열의 요소를 모두 꺼내준게 아닌 그냥 Array로 나온다.
    setTweets([tweet,...tweets]) //이거 배열로 나오는거 맞음 []안에 객체 6개있는걸로 나옴//3
    
   
    //dummydata + 전송된 트윗 = tweets
  };

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

  const handleChangeMsg = (event) => {
    setMsg(event.target.value)
  };

  return (
    <React.Fragment>
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">

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

                <textarea
                  placeholder="write here.."
                  className="tweetForm__input--message"
                    onChange={handleChangeMsg}
                      value={msg}
                      >
                </textarea>
                
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {'total:'+ tweets.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
           
              <button className='tweetForm__submitButton' onClick={handleButtonClick}>submit</button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        
        {tweets.map((value) => <Tweet key={value.id} tweet={value} />)}//4

      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;

• //1 : usestate로 설정해준 모습이다. tweets을 dummy~로 설정하고,
  useState 초깃값은 dummy~로 설정해줬다.
  그 밑으로는 각각 input과 textare를 change하는 이벤트를 저장하는 useState를 만들었다.

• //2 : submit 버튼을 누르게 되면, 일어나는 event를 정리해놓은 곳이다. const tweet으로 객체를 직접 설정해서, 폼에 작성하는 작성자의 id 등등을 useState변수로 설정한다. 폼을 보여주는 곳은 밑에서 따로 작성한다.

• //3 : 위의 useState변수들을 잘 기억해야한다. tweets는 dummydata(더미데이터)라서 데이터들을 받아오는 곳이라고 생각하면 된다.
  그리고 직접 설정한 변수 tweet을 합쳐서 트윗을 보여줘야 하기 때문에 tweets에 둘을 합치는 함수 setTweets를 작성해줘야 한다. tweets를 그대로 쓰면 배열이 직접 리턴되기 때문에, 여기서는 spread연산자를 써줘야한다. 따라서 작성자가 쓴 폼 + 기존 데이터를 [작성자가쓴 form + ...dummydata]형식의 함수로 받아준 후 tweets에 리렌더링하게 된다.

• //4 : Tweet의 prop을 받아와서 map으로 새로운 함수로 만든다. 여기서 prop으로 tweet이 사용되고, map의 인자가 tweet안의 데이터로 들어가서 그려낸다.

내가 props.texContent라고 고른이유는, 막연하게 Tweet 안에 내용이 들어가니까!
라고 대충 생각해버렸던 것 같다. 근데 지금 다시 보니까, 이렇게 생각할거면 차라리
Tweet.textcontent를 고르는게 맞지 않았나....싶다;;
아무튼 props.children이라는 개념에 대해서 정리해보자면,

const Poet = (props) => {
return <ul>{props.children}</ul>
}

• props.children을 화면에 표시하는 간단한 코드를 작성해보았다.

위를 다른 방법으로 작성할 수도 있는데,

const Poet = ({children}) => {
return <ul>{children}</ul>
}

이렇게 prop을 빼고 children을 prop그 자체로 쓸 수도 있다.

props.children은 주로 자식 or html 의 component가 어떻게 구성되어있는지 모를 때,
화면에 표시해야 하는 경우 유용하게 사용된다.

두번째 오답은 복수정답인줄 모르고 하나만 체크해버렸다!
이 전 글에서도 말했듯이, onClick 안에는 함수로 들어가거나, 외부에서 함수 선언 후 넣어줘야 하기때문에, D번도 맞는 정답지다.

props는 객체로 들어오게 된다는 사실을 잊지말자!
A와 B는 각각 함수 선언식과 표현식으로 만든것이고,
C는 name이라는 변수를 설정 후 name에 "walli"값을 설정해줬다.
D는 props라는 객체를 변수로 설정해 준 후 key와 value값을 정해줬다.
그 후에 spread syntax로 {name:"wailli"}를 전달해주는 모습이다.

음.....여기서 뭔가 중요한 걸 깨달은것같다.
props에 관한 어지러운 생각이 좀 정리된 느낌.
글 맨 위에서 공부한 props.child처럼 위 문제의 구문도 정리해보면,

const Hello = ({name}) => <div>{name}</div>

이렇게 나오게 된다.
D를 풀어보면, {...props}은 {name: "walli"}로 나오게 되서, name이라는 prop을 저장하게 된다. 위의 예제와 일맥상통한다!

아무래도 객체구조분해할당을 다시 되짚어보는 시간이 필요한 것 같다.

//배열
let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

//객체
//예제1
let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

//예제2
{a : 1}
const { a } = { a : 1 };
a = 1;

그 전의 과제에서도 비슷한 경우를 찾을 수 있다.

const Tweet = ({ tweet }) => { //생략 }

위의 component는 tweet이라는 prop을 받아서 함수를 다른 component에 재사용 가능하다.