✅ TIL

---

리액트란?

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

선언형이고, 컴포넌트 기반이고, 다양한 곳에서 활용할 수 있다는 특징이 있다.

• 선언형: 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠적기 보다는
  하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.

• 컴포넌트 기반: 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
  컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.

• 범용성: 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
  Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

JSX

---

DOM으로 엘리먼트 생성하기 예제

DOM에서 엘리먼트를 생성하는 방법을 먼저 보자.

아래와 같이 Hello, HTML DOM을 화면에 표시하기 위해서 아래 예시처럼
HTML(index.html)과 JavaScript(index.js)를 연결하는 작업을 진행해야 한다.

import "./styles.css";

const user = {
  firstName: "HTML",
  lastName: "DOM"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

그렇다면 React에서는 어떻게 작업할까?

React로 엘리먼트 생성하기 예제

아래 예제는 JSX를 쓰지 않은 React를 먼저 나타내고 있다.

JSX 쓰지 않은 결과를 확인하신 후, 주석 처리하자.
코드 라인 17번째 줄 주석을 해제하면 JSX를 활용한 React의 결과를 확인하실 수 있다.

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  // return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

우리는 App.js 이 한 개의 JavaScript 파일 안에서 HTML과 JavaScript로 나누어졌던 두 가지 일을 한 번에 처리하고 있다.

처음에는 HTML과 JavaScript를 한 곳에 작성하는 게 어색할 수 있지만, 하나의 파일에서 웹 애플리케이션의 구조와 동작을 한눈에 파악할 수 있다. 이렇게 JSX는 개발자가 코드만 바라보는 게 아니라, 구조를 바라보게 돕는다.

JSX 규칙

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

JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

// 틀린 예시

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

// 옳은 예시

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

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

React에서 CSS class 속성을 지정하려면 className 으로 표기해야 한다.

만약 class로 작성하게 된다면 React에서는
이를 html 클래스 속성 대신, 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

// 틀린 예시

<div class="greeting">Hello!</div>

// 옳은 예시

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

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

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.

중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

function App() {
  
  const name = 'Josh Perez';
  
  return (
    <div>
      Hello, {name};
    </div>
  );
)

사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.
소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다.

이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

// 틀린 예시

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

function HelloWrold() {
  
  return <hello />;
  
}

// 옳은 예시

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

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

조건부 렌더링에는 삼항연산자 사용

조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

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

여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.

map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // TODO: postToJSX 함수를 이용하여 여러 개의 엘리먼트롤 표시해보세요.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)} // or posts.map((el) => postToJSX(el))
    </div>
  );
}

Create React App

---

리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.

npx create-react-app@latest 폴더이름

💬 Sprint Review

---

이번 React Twittler Intro 과제에서는 유명 SNS 서비스인 Twitter와 유사한 Twittler를 React로 개발한다.

앞으로 있을 React Twittler Router, React Twittler State Props 과제 통과를 위해서 JSX 기본 문법을 숙지하고, 컴포넌트 기반 개발을 처음으로 시작하는 단계이다.

npm install을 통해 필요한 모듈을 설치한다.

• npm run start : 실제 React Web App을 개발 모드로 브라우저에서 실행시켜 볼 수 있다.
• npm run test : 기술 요구사항에 대한 유닛 테스트를 실행하고, 결과를 확인해 볼 수 있다.
• npm run submit : 과제 제출을 위한 스크립트이다.

npm run start를 통해서 리액트 개발을 시작해 보자.

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">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
    </section>
  );
};

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

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

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
              </div>
              TODO : 트윗 메세지가 있어야 합니다.
            </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 />
      TODO : Footer 컴포넌트를 작성합니다.
    </section>
  );
};

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

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

현재 이 화면을 이렇게 구현해야 한다.

가이드라인을 따라 코딩하니 어렵지 않았다.

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

const Sidebar = () => {
  return (
    <section className="sidebar">
      <div>
        <i className="far fa-comment-dots" />
      </div>
    </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>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States
    </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 (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture} />
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className={tweetUserNameClass}>{tweet.username}</span>
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <span className="tweet__message">{tweet.content}</span>
            </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 dummyTweets={dummyTweets} />
      </main>
    </div>
  );
};

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

💡 Point.

map 메서드에 의해 li 태그에 삽입되고 있는 엘리먼트,

즉, tweet의 타입은 무엇일까?

바로 객체다. 객체의 값을 사용하려면 dot notation을 이용하면 되는 것이 포인트였다.

자, 이제 준비는 모두 끝났으니 parkhacker를 찾아보자.
우선 각각의 tweet 중에서 usename이 parkhacker인 경우를 새로운 변수에 할당한다.

const isParkHacker = tweet.username === 'parkhacker'

다음은 삼항 연산자를 이용하여 tweet.username이
parkhacker인 경우와 그렇지 않은 경우에 대해 className을 지정해 준다.

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

마지막으로 각각의 tweet이 렌더링 되고 있는 li tag 안에 username에 따라 배경색이 달라질 수 있도록 적용해 보자.

중괄호 {}를 이용한 JSX 문법은 태그와 태그 사이는 물론
className처럼 태그 안에 들어가는 속성의 값에도 사용할 수 있다.

<li className="tweet" key={tweet.id}>
  <span className={tweetUserNameClass}>{tweet.username}</span>
</li>