[React] 리액트 기초

프론트엔드 역사

• html,js,css > jquery > react vue angular

라이브러리

리액트 기초

• 리액트는 js 라이브러리
• 리액트 3가지 특징 : 선언형, 컴포넌트기반, 범용성
• 리액트는 js와 html을 같이볼수있음
• 컴포넌트기반 :하나의 기능구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함, 독립적, 재사용에 좋음
• 의존성이 낮아서 하나를 수정할때 다른것도 수정하지 않아도됨
• 리액트 네이티브로 모바일 개발도 가능
• 특정 변수를 다른파일에서 쓰고싶으면 export let arr = ~~ 하고 다른 파일에서 import {arr} from './dummyData' 이렇게 쓰면됨

JSX

• jsx는 js가 확장된 문법, 브라우저에서 바로 실행은 불가, js 코드로 변환해줘야함
• 이때 사용하는게 "Babel", jsx를 js로 번역해줌
• react에선 dom과 다르게 css, jsx문법만으로 웹 개발 가능. js html한번에 볼수있음
• 그렇다고 jsx는 html은 아님, Babel필요함
• 기존에 js html 을 dom으로 연결했다면 react는 jsx로 가능, 기능과 구조 한번에 볼수있음
• 이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 함.
• jsx 안쓰고도 react쓸수있지만 가독성이 구림

JSX 규칙

• jsx에서 여러 엘리먼트 작성하고자 하는경우 최상위에서 오픈태그, 클로즈태그로 감싸주어야함(리턴이 하나여야함, 억지로 div로 감싸도 됨)
• react에서 css class속성 지정하려면 div className = ~~ 이렇게 표기해야함

• JSX에서 JS쓰고싶으면 꼭 중괄호를 이용해야함.
  

• 리액트 엘리먼트가 jsx로 작성되면 "대문자"로 시작해야함. 소문자로 시작하면 html엘리먼트로 인식함. 이렇게 대문자로 작성된 jsx컴포넌트를 사용자 정의 컴포넌트라고 함

• if문대신 삼항연산자 써야함
  

• 여러개의 html엘리먼트 표시할때 "map()"함수 써야함, 이때 반드시 "key" 속성 써야함

• 삼항연산자 else 자리에 둘게 없으면 a===1 ? a++ : null 이렇게 null써줌

• .tweetuserInfo > .tweetusername.tweetusername--purple {
  background-color: var(--point-color-tint-2);
  } css 에 이렇게 적혀있다면, 'tweetusername tweet__username--purple' 이렇게 쓸수있다.

App.js 의사코드 작성

import React from 'react';
import './App.css';
import './global-style.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.

// 개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* classname 태그로 이모티콘을 불러온다. */}
      <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">
          {/* 배열의 갯수만큼 토탈을 불러온다. */}
          total : {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

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

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker'
        const tweetUserNameClass = isParkHacker
              // true라면 클래스네임을 보라색전용으로 바꿔준다
              ? 'tweet__username tweet__username--purple'
              // false이면 클래스네임을 일반 유저네임으로 바꾼다.
              : '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 />
      {/* 태그로 컴포넌트명을 넣어 후손 컴포넌트로 넣는다  */}

    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        {/* const Sidebar 로 대문자로 선언한걸 태그로 넣어 후손 컴포넌트로 넣는다 */}
        <Sidebar />
        
        <Features />

      </main>
    </div>
  );
};

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