React 맛보기

✏️ React의 3가지 특징

1. 선언형 : JSX 파일을 하로 명식적 작성이 가능한 선언형 프로그래밍을 지향함
2. 컴포넌트(Componant) 기반 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어두는 것 (컴포넌트로 분리하면 서로 독립적이고 재사용이 가능해서 기능자체에 집중이 가능!)
3. 범용성 : 리액트는 Javascript 라이브러리로 Javascript프로젝트라면 어디든 사용가능하다! (React Native로 모바일 개발도 가능!)

✏️ React 활용하기

• React에서 UI를 구성할 때 는 JSX문법을 사용하며 이것은 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다.
• JSX는 "BABEL"을 통해 자바스크립트 코드로 변환해줘야된다.(컴파일링)
• React에서 CSS class속성을 지정하고 싶다면 className으로 표기해주기 (그냥 class로 작성시 html이 아닌 javascript 클래스로 인식)

<div className = "greeting">Hi!</div>

• JSX에서 자바스크립트를 사용하려면 중괄호{ } 사용하기 (괄호가 없으면 일반 텍스트로 인식)
• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에 opening tag 와 closing tag로 감싸주기
• React 엘리먼트가 JSX로 작성되면 "대문자"로 시작하기 (소문자로 작성시 HTML로 인식)
• 조건부 렌더링은 if문이 아닌 삼항연산자 사용하기

<div>
	{
		(1+1 === 2) ? (<p>성공!</p>) : (<p>실패!</p>)
	}
</div>

• React에서 여러개의 HTML 엘리먼트를 표시 할 땐 map() 함수 사용하기 (map 함수 사용시 꼭 "key" JSX 속성 넣기)

const content = posts.map((map) =>
<div key = {post.id}>
	<h3>{post.title}</h3>
    <p>{post.content}</p>
   </div>
    );

✏️ React 과제 리뷰

const Sidebar = () => {
  return (
    <section className="sidebar">
      <i className="far fa-comment-dots"></i> //아이콘 불러오기
    </section>
  );
};

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          {/* TODO : dummyTweet로 전달되는 데이터의 갯수를 보여줍니다. */}
          {"total : " + dummyTweets.length} //dummyTweet 갯수 만큼 total에 담기
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      <footer>Copyright @ 2022 Code States</footer>
    </footer> //단순히 <div>로 쓰는게 아니라 가급적 의미를 담은 태그 사용하기 (시맨틱 엘리먼트)
  );
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 footer가 포함되어야 합니다.

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        //데이터를 받아와서 고차함수 map으로 매핑
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture}></img> //이미지 사진 불러오기
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {tweet.username === "parkhacker" ? ( //className에 삼항연산자 사용해서 parkhack면 이름의 색 보라색으로 변경!
                  <span className="tweet__username tweet__username--purple">
                    {tweet.username}
                  </span>
                ) : (
                  <span className="tweet__username">{tweet.username}</span> //유저이름 넣기
                )}
                <span className="tweet__createdAt">{tweet.createdAt}</span>{" "}
                //트윗 생성일자 불러오기
              </div>
              <div className="tweet__message">{tweet.content}</div> //트윗메세지
            </div>
          </li>
        );
      })}
    </ul>
  );
};

const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer /> //Features컴포넌트의 후손으로 Footer넣기
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar />
        <Features />
      </main>
    </div>
  );
};
// ! 아래 코드는 수정하지 않습니다.
export { App, Sidebar, Counter, Tweets, Features, Footer };