[C/F TIL] 27일차 - react, jsx, 컴포넌트

Code States
Front-end boost camp
Today
I
Learned

🥎 27일차 수업 시작!

🥎 JSX?

• react에서 ui를 구성할 때 사용하는 문법으로 javascript를 확장한 문법
• react에서는 css, jsx 문법만을 가지고 웹 어플리케이션을 개발할 수 있음
• javascript 만으로 마크업(markup) 형태의 코드를 작성해 DOM에 배치할 수 있도록 함
  -Bable 을 이용한 컴파일 과정 필요
• jsx를 사용하는 이유
  -- DOM 코드보다 명시적으로 코드를 이해 가능 (가독성 good)
  -- javascirpt문법과 HTML 문법을 동시에 이용해 기능과 구조를 한번에 확인

🥎 JSX 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함
• 엘리먼트 클래스 사용 시, className으로 표기
• javascript 표현식 사용 시, 중괄호({}) 이용
  -- 미사용 시 일반 텍스트로 인식
• 사용자 정의 컴포넌트는 대문자로 시작
  -- 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식
  -- JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부름
• 조건부 렌더링에는 삼항연산자 사용 (if문 x)
• 여러 개의 HTML 엘리먼트를 표시할 때, map()함수 이용
  -- map 함수 사용 시 반드시 "key" JSX 속성을 넣어야 함

🥎 컴포넌트 (Component)

• 하나의 기능 구현을 위한 여러 종류의 코드 묶음
• 모든 리액트 어플리케이션은 최소 한 개의 컴포넌트를 가짐
• 어플리케이션 내부적으로 근원(root)이 되는 역할
• 컴포넌트 기반 개발의 장점 : 보다 쉬운 유지보수
  -- 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발
  -- 마크업, 디자인, 로직을 긴밀하게 연결하여 개발 가능
  -- 재사용이 가능하여 효율적인 개발 가능

🥎 페어 프로그래밍

오늘의 페어프로그래밍..! 준비된 파일을 가지고 몇가지 테스트를 통과하며 구현하는 것

페어분이 넘나 친절하게 알려주셔서 리액트 기초 코드짜는 법을 조금 이해할 수 있게 되었따.

참고링크 : font awesome - (https://fontawesome.com/docs/web/add-icons/how-to)

import React from 'react';
import './App.css';
import './global-style.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.
console.log(dummyTweets); // 개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
        <i className="far fa-comment-dots"></i>
    // HTML 코드 사용 가능! font awesome 웹페이지 참고
    </section>
  );
};

const Counter = () => {
  const tweetCounter = dummyTweets.length
  // 콘텐츠 갯수를 세는 아이
  // 더미트위츠 배열 속 객체 갯수(length) 사용
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          total: {tweetCounter}
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return (
    // 컴포넌트 안에는 하나의 자식 엘리먼트만 가능
    // 기존 자식 요소인 div 위에 footer 태그를 씌워줌
    <footer>
      <div>
        <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
        Copyright @ 2022 Code States
      </div>
    </footer>
  );
};

const Tweets = () => {

  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
    // 박해커라는 밸류값을 가르키는 변수 하나 선언
        const userNamePark = tweet.username === 'parkhacker'
    // 그 박해커 변수, 삼항연산자를 활용해 박해커면 ~를 아니면 ~~~를 실행하는 함수 선언
        const result = userNamePark ? 'tweet__username--purple' : 'tweet__username';

        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              // 사진 넣을 땐 img 태그
              // jsx 특징 ! 변수 사용 시엔 {} 사용
              // {tweet~~~~} 가 아니라 'tweet~~~' 면 URL 주소 그 자체가 올라감
              <img src = {tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <div className={result}>
                {tweet.username}
                </div>
                <div className='tweet__createdAt'>
                  {tweet.createdAt}
                </div>
              </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 />
    </section>
  );
};

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

// ! 아래 코드는 수정하지 않습니다.
export { App, Sidebar, Counter, Tweets, Features, Footer };

🥎 27일차 수업을 마치며...

어렵지만 조은 페이분 만나 감사,,! 오늘 저녁엔 한번더 코드 찍어보고 내일 리액트 진도 예습 예정