[개발기초] React JSX - 2주차 (3)

뒤로 갈수록 수업을 따라가기가 어렵다고 생각이 들어서 니꼴라스 강의를 통해 React예습을 해볼려고 했는데..
이것저것 나갈 일도 생기고 완강할려면 시간이 꽤 걸려서 그냥 바로 수업들었다.
2일의 React수업이 더 남았는데 어떻게든 되겠지 뭐🙂


⚛️ React는 Javascript에서 확장한 문법인 JSX를 사용한다.
그리고 이 JSX를 웹에서 구동하기 위해 Babel이라는 것을 사용한다(번역기 같은거 인듯).

🤓 나는 HTML, CSS, Javascript > React 순서로 배웠다 보니 React의 장점을 한 눈에 알 수 있었다. React는 Javascript문법과 HTML문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있게 해준다.

👨‍💻 또한 웹에서 작동하는 기능들이 각각의 component로 구성되어 있어 사용자 경험의 최적화를 불러와 줄 수 있고 개발하는 개발자들 입장에서도 수정 보완이 쉬워진다.

이틀에 걸쳐서 두개의 sprint도 진행했는데 트위터 클론 앱을 React를 통해 수정하고 내용을 추가하고 새로운 서비스를 기능을 만드는 것이었다.

Twitter Data배열을 App기능을 하는 js파일로 가져와서 map, filter함수를 통해 해당하는 데이터를 알맞은 곳에 배치시켜주고 웹페이지의 담당 기능들을 컴포넌트로 구성해서 웹페이지를 구성시켰다.

그리고 Fontawesome을 통해 원하는 icon을 넣는 방법도 배웠음

 const Sidebar = () => {
    return (
      <section className="sidebar">
        <i FontAwesomeIcon icon={faCommentDots} className="far fa-comment-dots"></i>
      </section>
    );
  };

  const howManyTweets = dummyTweets.length
  
  const Counter = () => {
    return (
      <div className="tweetForm__input">
        <div className="tweetForm__inputWrapper">
          <div className="tweetForm__count" role="status">
            Total : {howManyTweets}
          </div>
        </div>
      </div>
    );
  };

  const Footer = () => {
    return <div>
      <footer></footer>
    </div>;
  };
  

  const Tweets = () => {
    return (
      <ul className="tweets">
        {dummyTweets.map((tweet) => {
            const isParkHacker = tweet.username === 'parkhacker';
            const tweetUserNameClass = isParkHacker
              ? 'tweet__username tweet__username--purple'
              : 'tweet__username';

          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">
                  <span className={tweetUserNameClass}>{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 />
        TODO : Footer 컴포넌트를 작성합니다.
      </section>
    );
  };

  const App = () => {
    return (
      <div className="App">
        <main>
          <Sidebar></Sidebar>
          <Features />
        </main>
      </div>
    );
  };

여기서 주의할 점은 JSX가 Javascript와 비슷한 문법들이 많지만 확장판에 가깝다 보니 다른 부분들도 생긴다.
예를들어 조건부 문장을 작성할 때는

            const tweetUserNameClass = isParkHacker
              ? 'tweet__username tweet__username--purple'
              : 'tweet__username';

이렇게 적어줘야한다. javascript처럼 if문을 작동 안한다.

이런식으로 Sidebar, Counter, Footer, Tweets, Features의 컴포넌트들이 App 컴포넌트에 들어가 하나의 웹페이지를 만들어 냈다.