S2U4 [React] Intro

이해도 자가 점검 리스트

Chapter1. React Intro

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

Chapter2. Create React App

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

이번 시간에는 앞에서 배운 내용을 사용하여 페어분과 함께 Twittler를 React로 개발해 보았다.

Sidebar

사이드바에는 메시지 아이콘을 작성하였다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      <i className = "far fa-comment-dots">더보기</i>
    </section>
  );
};

Counter

카운터 부분에는 {'total:' + dummyTweets.length}을 사용해 전체 트윗 수를 나타내 주었다.

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          {'total:' + dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

Footer

const Footer = () => {
  return (
    <div>
    <footer>
      <img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
      Copyright @ 2022 Code States</footer>
    </div>
  );
};

Tweets

Tweets에는 유저이름과 트윗 생성일자를 span태그로 작성하였다.

 <span className = {tweetUserNameClass}>{tweet.username}</span>
 <span camlassNe = 'tweet__createdAt'>{tweet.createdAt}</span>

Features

Features 부분에는 Tweets와 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>
  );
};

 

왜 리액터인가?

 

JSX 코드를 Babel이 변환해준다.

JSX는 html 과 javascript를 문법을 동시에 이용가능 한눈에 컴포넌트를 확인가능

 

JSX 규칙

1. 하나의 엘리먼트안에 모든엘리먼트가 포함되야함

2. 클래스를 클래스네임으로 표기

3. 중괄호사용

4. 대문자로 시작해야함

5. 조건부 렌더링은 삼항연산자로 사용해야함(if문은 표현식이 아니라 사용안됨)

6. 반복되는 상위에 키 속성 부여안하면

7. 에러남 html엘리먼트 표시할때 map 사용

8. uuid, nanoid =>무작위한 문자열을 반환 nanoid선호 (조금 더 빠름)