JSX

• 하나의 엘리먼트 안에 모든 엘리먼트 포함

<div>
  <div>
    <h1>Hi</h1>
  </div>
  <div>
    <h1>hello</h1>
  </div>
</div>

• 엘리먼트 클래스 사용 시, classname으로 표기

<div classname = "good">coding</div>

• Javascript 표현식 사용 시, 중괄호 {} 필수

function app {
    
   const name = "hong";
 
   return {
      <div>
         hello,{name}
      </div>
   };
}

• 사용자 정의 컴포넌트는 대문자로 시작

function Hello() {
...
}

function HelloBye() {
   return <Hello />;
}

• 조건부 렌더링에서는 if문이 아닌 삼항연산자를 이용

<div>
  {
    (1 + 1 === 2) ? (<p>정답</p>) : (<p>오답</p>)
  }
</div>

• 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용

return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map((post) =>
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      )}
    </div>
  );

**key 속성**

• React에서 map()메소드 사용 시, key 속성을 사용해주어야 한다.
• 메소드 내부에 있는 첫번째 엘리먼트에 넣어준다.

function Blog() {
 
  const blogs = posts.map((post) => (
    <div key={post.id}>    // key 속성을 넣은 예시
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

---

React-twittler-intro 과제

https://github.com/forhrever/fe-sprint-react-twittler-intro.git

Q : Font Awesome을 활용하여 트윗 메시지 아이콘이 있어야 합니다. (className : "far fa-comment-dots").

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
      <i className = "far fa-comment-dots"></i> 
    </section>
  );
};

Q : dummyTweet로 전달되는 트윗 개수와 카운트가 일치해야 합니다. ex) total : 5

• total과 숫자가 콘텐츠에 포함되어 있어야 합니다.

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

Q : Footer 컴포넌트의 후손 엘리먼트로 시맨틱 엘리먼트 footer가 있어야 합니다.

• 시멘틱 엘리먼트 <footer>가 포함되어야 합니다.

const Footer = () => {
  return (
      <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States
      </footer>
  );
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 footer가 포함되어야 합니다.

Q : 트윗 저자의 프로필 사진이 있어야 합니다.

• li.tweet 엘리먼트의 후손 엘리먼트로 <img> 엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보를 찾아서 <src> 속성을 지정합니다.

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src = {tweet.picture}></img>  // 변경 전 img class ...
            </div>
     .
     .
     .

Q : 유저 이름이 있어야 합니다.

• li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 유저 이름을 <span>의 텍스트 콘텐츠로 넣습니다.
• 클래스 이름은 tweet__username으로 지정합니다.

  .
  .
  .
<div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                <span className=tweet__username>{tweet.username}</span>
  .
  .
  .

Q : 트윗 생성 일자(yyyy. m. d.) 가 있어야 합니다.

• li.tweet 엘리먼트의 후손 엘리먼트로 <span> 엘리먼트를 생성하고 dummyTweets의 트윗 생성 일자를 <span>의 텍스트 콘텐츠로 넣습니다.
• 클래스 이름은 tweet__createdAt으로 지정합니다.
• 트윗 생성 일자는 yyyy. m. d. 형식으로 표시되어야 합니다. (’static/dummyTweets.js’ 파일을 잘 읽어보세요.)

<div className="tweet__content">
            .
            .
            .
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
                <span className='tweet__createdAt'>{tweet.createdAt}</span>
              </div>
            .
            .
            .

Q : 트윗 메시지가 있어야 합니다.

• li.tweet 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 트윗 내용을 <div> 의 텍스트 콘텐츠로 넣습니다.
• 클래스 이름은 tweet__message으로 지정합니다.

<div className="tweet__content">
              <div className="tweet__userInfo">
                .
                .
                .
              </div>
              <div className='tweet__message'>{tweet.content}</div>
            </div>

Q : Feature 컴포넌트의 후손 컴포넌트로 Counter 컴포넌트가 있어야 합니다.

Q : Features 컴포넌트의 후손 컴포넌트로 Footer 컴포넌트가 있어야 합니다.

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

Q : App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트가 있어야 합니다.

const App = () => {
  return (
    <div className="App">
      <main>
        {/* TODO : Sidebar 컴포넌트를 작성합니다. */}
        <Sidebar /> // App 후손 Sidebar 컴포넌트 지정
        <Features />
      </main>
    </div>
  );
};

Q : 조건부 렌더링을 활용해서 여러 트윗 중 유저 이름이 parkhacker인 배경색이 var(--point-color-tint-2)가 되도록 클래스(tweet__username--purple)를 지정해야 합니다. (tweet__username tweet__username--purple)

• ‘src/App.css’에 클래스가 미리 준비되어 있습니다. (className : 'tweet__username--purple')

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker';  // 변수 isParkHacker = 박해커

        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">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                <span className={tweetUserNameClass}>{tweet.username}</span> 
                // 위에 선언했던 tweetUserNameClass
              </div>