[TIL] Day27 #React #JSX

[TIL] Day27
[SEB FE] Day27

☑️ React

Front-end 개발을 위한 JS 라이브러리

👉 React는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음"인 컴포넌트 기반으로 개발을 하기 때문에, 기술적 분류에 따라 코드를 분리하지 않고, 기능 별로 코드를 분리하길 권장!

1. 선언형(Declarative): 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향
2. 컴포넌트 기반: 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발 가능 (유지보수, 유닛 테스트 하기에 편리)
3. 범용성(다양한 곳에서 활용 가능): 리액트는 기존 프로젝트에도 유연하게 사용 가능

📎 JSX(JavaScript XML)

React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법 → React Element 생성

✋ JSX ≠ HTML (HTML 문법을 일부 차용했지만, 다른 문법 사용)
👉 JSX를 사용하면 JS만으로도 markup 형태의 코드를 작성하여 DOM에 배치 가능

• 브라우저가 바로 실행할 수 있는 JS 코드가 아님
  → So, 브라우저가 이해할 수 있는 JS 코드로 변환해주어야 함 ⇒ Babel

• Babel: JSX를 브라우저가 이해할 수 있는 JS로 컴파일 → 브라우저가 JS를 읽고 화면에 렌더링

• JS 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 가능
  → 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 함

✋ JSX 없이도 React 요소를 만들 수 있지만 코드가 복잡해지고, 가독성이 떨어지는 단점 존재

✔️ JSX 문법

• 여러 Element를 작성하고자 하는 경우, 최상위에서 opening tag & closing tag로 감싸주어야 함

  <div>
  	<div>
  		<h1>Hello</h1>
  	</div>
  	<div>
  		<h2>World</h2>
  	</div>
  </div>

• Element Class 사용 시, className으로 표기 ✋ 만약 class로 작성한다면 React에선 이를 HTML 클래스 속성 대신 JS 클래스로 받아들이기 때문에 주의!

  <div className="colors">Hello!</div>

• JS 표현식 사용시, 중괄호({}) 이용

  function App() {
  	const name = "soobin";
  
  	return (
  		<div>
  			Hello, {name}!
  		</div>
  	);
  }

• 사용자 정의 컴포넌트는 대문자로 시작 ✋ 만약 소문자로 시작한다면 일반적인 HTML 엘리먼트로 인식

  function Hello() {
  	return <div>Hello!</div>;
  }
  
  function HelloWorld() {
  	return <Hello/>;
  }

• 조건부 렌더링에는 삼항연산자 사용 ( if문 ❌ )

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

• 여러 HTML element 표시시, map() 함수 이용
  • map() 함수 사용시, 반드시 ‘key’ JSX 속성 삽입
    • 데이터의 ID를 key로 사용
    • 변하지 않고, 예상 가능하며, 유일한 ID가 없을 경우 항목의 index를 key로 사용
    • key 속성 위치는 map() 메서드 내부에 있는 첫 element에
  ✋ map() 특성: 배열의 각 요소를 특정 논리(함수)에 의해 다른 요소로 지정(map)

  function Blog() {
  	const content = posts.map((post) =>
  		<div key={post.id}>
  			<h2>{post.title}</h2>
  			<p>{post.content}</p>
  		</div>
  	);
  
    // return 안에 단일 요소 존재시 () 생략 가능
  	// 두 개 이상의 요소 존재시 ()로 감싸주어야 함
  	return (
  		<div>
  			{content}
  		</div>
  	);
  }

📎 Component

• 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당
• 하나의 기능 구현을 위한 코드 모음집
• 클래스 형태로도 표현 가능

• 컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장
  ⇒ 컴포넌트 간 의존성이 낮아지고 독립적으로 작동

  • 하나의 기능 변경시, 다른 컴포넌트를 수정할 필요 없음
  • 원하는 수정 사항에 맞춰 컴포넌트 위치만 수정해주거나 재사용 가능 → 효율적인 개발 가능

• 컴포넌트 먼저 완성시킨 후, 레이아웃에 따라 유동적으로 컴포넌트 위치를 변경하는 상향식 개발(Bottom-up) 방식에 적합

• 기존엔 클래스형 컴포넌트 주로 사용 → 최근엔 함수형 컴포넌트를 많이 사용

📎 Create React App

React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

// React project 생성
npx create-react-app <project-name>

✋ 모든 컴포넌트 위엔 항상 root 역할을 하는 최상위 컴포넌트 존재 (ex. <App>)

---

✔️ JSX 예시

// 1
let langs = ["JavaScript", "HTML", "Python"];
  // map() 함수 호출 결과를 변수에 담아줌
  let viewLangs = langs.map((it) => {
      return <p>{it}</p>;
    });
    
  return (
    <div>
      {viewLangs}
    </div>
  );

// 2
let langs = ["JavaScript", "HTML", "Python"];

  return (
	// 중괄호{} 사용해서 JS를 내부에 표현
	// 화살표함수에서 중괄호{}를 쓰면 return이 꼭 존재해야 함 (없다면 undefined return)
    <div>
       {langs.map((it) => { 
        return <p>{it}</p>;
      })} 
    </div>
  );

// 3
let langs = ["JavaScript", "HTML", "Python"];
  return (
	// 화살표함수에서 ()를 사용하면 () 안의 값이 return
    <div>
      {langs.map((it) => (
        <p>{it}</p>
      ))}
    </div>
  );

// X
let langs = ["JavaScript", "HTML", "Python"];
	
  let viewLangs = () =>  {
    return langs.map((it) => {
      return <p>{it}</p>;
    });
  };

  return (
	// viewLangs가 화살표 함수 표현식으로 선언되어 있으므로 함수 호출 연산자인 ()를 써야 작동
	// {viewLangs} (x)
    <div>
      {viewLangs()}  
    </div>
  );

---

☑️ [Pair] React Twittler Intro

• Using fontawesome

// index.html에 script tag로 fontawesome url 지정 후 js 파일에서 사용

// index.html
<script src="https://kit.fontawesome.com/14d687cae1.js" crossorigin="anonymous"></script>

// App.js
<i className="far fa-comment-dots"></i>

// App.js 하나의 파일에 몽땅 코드 떄려넣기 
import React from "react";
import "./App.css";
import { dummyTweets } from "./static/dummyData";

console.log(dummyTweets); // 개발 단계에서 사용하는 더미 데이터

const Sidebar = () => {
  return (
    <section className="sidebar">
      <h1>Twittler</h1>
      <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">
          <span>total: {dummyTweets.length}</span>
        </div>
      </div>
    </div>
  );
};

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

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 (
          // 위에서 map() 사용했으므로 key 설정
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture} alt="profile-img"></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                // class가 Line38에 선언된 변수이기 때문에 {} 안에 작성
                <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>
        <Sidebar />
        <Features />
      </main>
    </div>
  );
};

export { App, Sidebar, Counter, Tweets, Features, Footer };

✅ Component 분리해서 구조 Refactoring해보기