S2 Unit4 - React Intro

딩쓰·2022년 9월 28일

코드스테이츠 TIL

목록 보기
5/19

React란 무엇인가?

  • 웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

React의 3가지 특징

1.선언형: 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적지 않고 하나의 파일에 JSX(HTML과 JS가 결합한 문법)를 기반으로 명시적으로 코드를 작성 가능

2.컴포넌트 기반: 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 독립적이고 재사용 가능해서 기능 자체에 집중하여 개발할 수 있음

3.범용성:JS가 사용된 프로젝트 어디에든 사용 가능해서 범용적임. Facebook에서 관리되어 안정적, 유명하며, 리액트 네이티브로 모바일 개발도 가능

Chapter1-1. JSX

JSX란 무엇인가?

  • JavaScript XML의 줄임말로 JS를 확장한 문법. 문자열도 아니고 HTML도 아님
    • JS지만 브라우저가 바로 실행할 수 있는 코드가 아님 -> 브라우저가 이해할 수 있는
      JS 코드를 위해 Babel을 사용함
    • JSX 코드 컴파일 - Babel이 JS코드 변환시킴 - 브라우저가 JS코드를 읽어 렌더링(구현)
  • 바닐라 JS의 DOM과 다르게 CSS,JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있음
  • JavaScript 만으로 마크업형태의 코드를 작성하여 DOM에 배치가능
    ⚠️ JSX는 HTML이 아니라서 Babel을 이용한 컴파일 과정 필요!!

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

import React from "react";

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;
//Hello, React JSX Activity!
  • 위의 예시는 HTML과 JavaScript를 한 곳에 작성. 하나의 파일에서 웹 애플리케이션의 구조와 동작을 한 눈에 파악
  • JSX를 쓴 코드는 안 쓴 코드보다 가독성 좋음

JSX 문법

암기필요!

  • 여러개의 엘리먼트 선언 시 태그로 감싸기
  • className 으로 표시
  • JS 변수를 쓰려면 중괄호{} 이용
  • 사용자 정의 컴포넌트는 '대문자'로 시작
  • if문 대신 삼항연산자 사용
  • 여러개의 HTML 엘리먼트를 표시할 때, map() 함수사용
  • map()함수 사용시, 반드시 'key'속성을 내부에 있는 첫 엘리먼트에 넣기

  1. 2개 이상의 엘리먼트를 작성할때, 최상위에서 opening tag와 closing tag로 감싸주기

  2. HTML class 속성은 class가 아니라 **className**으로 사용

3.JS 변수를 쓰고자 한다면, 중괄호{} 이용 -> 중괄호 사용안할시 일반 텍스트로 인식

  1. React 엘리먼트가 JSX로 작성되면 '대문자'로 시작 -> 소문자면 일반적인 HTML로 인식
  • 사용자 정의 컴포넌트: 아래와 같이 대문자로 작성된 JSX 컴포넌트

5.Element의 조건부 렌더링은 삼항연산자로 작성(if문 X) 삼항연산자는 if문과는 다르게 '표현식'이기 때문에 변수에 할당 가능

6.여러개의 HTML 엘리먼트를 넣으려면 map() 함수 사용 . map() 사용시 반드시 'key' JSX속성을 넣어야함 -> map내부에 있는 첫 엘리먼트줄에 넣기

map() 함수 예시

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>
    );
  };

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

//Hello JSX
//Hello World
//Welcome to learning React

//Installation
//You can install React from npm

Chapter1-3. Component

Component

리액트는 컴포넌트 기반 개발 라이브러리이다. 더 표현하자면 "UI를 구성하는 필수 요소", "리액트의 심장" 이라고 표현할 정도로 중요함

1.컴포넌트: 하나의 기능 구현을 위한 여러 종류의 코드 묶음

2.각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 컴포넌트 여러개로 앱을 만듬

3.모든 리액트 앱은 최소 1개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 근원(root)이 되는 역할을 하고 다른 자식 컴포넌트들을 가질 수 있음 ->트리구조를 띔

ex)유튜브로 든 예시
1.아래와 같이 Header엔 컴포넌트인 검색창, 세팅 등이 있고 ContentList에는 동영상인 Content가 있음

2. 트리구조로 보면 독립적인 컴포넌트들을 여러 개 만들고 이들을 한데 모아 복잡한 UI를 구성하고 더 나아가 복잡한 애플리케이션도 만들 수 있음

3.기존의 헤더를 아래와 같이 화면 왼쪽으로 옮겨 사이드바를 만들려면?

→ 리액트를 사용해서 UI에 맞추어 기존 컴포넌트의 위치만 수정하면 되니 보수에 용이함

컴포넌트 기반 개발의 특징

  • 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발
  • 마크업, 디자인, 로직을 긴밀하게 연결하여 개발
  • 컴포넌트는 재사용 가능하여 효율적인 개발이 가능

Chapter2. Create React App

학습목표

Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.
create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.
리액트 랜덤 명언 앱 튜토리얼을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.

  • 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
  • create-react-app 를 사용한다면 터미널에서 단 한번의 명령 만으로 자신만의 리액트 프로젝트를 개발할 수 있음

리액트 시작하는 방법
1.먼저 폴더를 만들고 mkdir 폴더이름
2.터미널에서 만들고자 하는 폴더에 들어가서 npx create-react-app 폴더이름 입력
3.만들어지면 터미널창에 react, react-dom, react-scripts 등이 보이고 마지막줄에 'Happy Hacking'이란 메시지가 나오면서 생성완료.
4. npm run start로 리액트 서버 열어서 실행 (실제 React Web App을 개발 모드로 브라우저에서 실행할 수 있음)

과제 - React Twittler Intro

실제 Twitter와 유사한 Twittler를 React로 개발하는 과제였다.
JSX 기본 문법을 숙지하고, 컴포넌트 기반 개발을 처음으로 시작하는 단계이다.
React가 처음이라 낯설었다..

  • React Twittler Intro의 파일 구조
  • src/App.js에 import 된 ./static/dummyData.js
import React from 'react';
import './App.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.
console.log(dummyTweets) // 개발 단계에서 사용하는 더미 데이터입니다.

과제수행 코드

  • username이 'parkhacker'인 것 찾아 css로 보라색 배경색 주기
  • const isParkHacker = tweet.username === 'parkhacker'; 식 자체를 변수에 할당 가능함
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>
    </section>
  );
};

//javascript 불러오려면 {} 중괄호 표시 해야함 
const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
        {/* dummyTweet로 전달되는 데이터의 갯수 */}  
        {'/Total:'+ dummyTweets.length} 
        </div>
      </div>
    </div>
  );
};

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

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
         const isParkHacker = tweet.username === "parkhacker" ? "tweet__username tweet__username--purple" : "tweet__username";
// username이 "parkhacker"인 경우를 할당한 isParkHacker 변수와
// 변수선언과 할당 동시에 삼항연산자 사용이 가능하다
// ex) 조건값(변수선언과 할당)  ?  true값 : false값   
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다. 문제품 */}
              <img src = {tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. 문제품*/}
                <span className={isParkHacker}>{tweet.username}</span>
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. 문제품*/}
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};
//<Footer/> 문제 품
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 };
profile
딩쓰
Frontend Developer
이전 포스트

S2 Unit3 - [JS/Node] 비동기 2 , 과제: 타이머 API, Node.js fs 모듈

다음 포스트

S2 Unit5 - React SPA

0개의 댓글