🐹 Achievement Goals 🐹

🐾 React Intro

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

  1. 선언형 (Declarative)
     코드를 깊게 살펴보지 않아도 코드가 의도하는 바를 알 수 있다.
  2. 컴포넌트 기반 (Component-Based)
     컴포넌트란 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어놓은 것이다. 컴포넌트로 분리된 코드는 독립적이며 재사용이 가능하다. 이는 우리가 기능에 집중할 수 있도록 도와주며, 유지보수나 유닛 테스트를 하기 편하게 해준다.
  3. 범용성 (Learn Once, Write Anywhere)
     안정적이고 유명하다. 모바일에서도 사용 가능하다.

• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.

  JSX는 React에서 UI를 구성할 때 사용하는 문법이다. JavaScript와 HTML의 문법을 모두 사용하기 때문에 기능과 구조를 한 번에 알아볼 수 있다. JSX는 JavaScript와는 분명히 다르며, Babel이 JSX를 JavaScript로 컴파일시켜준다.

• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

  위에서 설명했다 !

+) React의 친구들!
Angular, Vue, Svelte 등

🐾 Create React App

• Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.

  React를 사용한 어플을 만들 때 초기 세팅을 해주는 프로그램이다.

• npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.

  Yes ! 🙄

• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

  Yes ! 🤨

• 리액트 랜덤 명언 앱 Hands-on을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.

  인덱스를 랜덤으로 뽑기 !

  
  const getRandomIndex = (length) => {
      return parseInt(Math.random() * length);
  }

• Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.

  Yes ! 🤔

🐾 React Twittler Intro

• 리액트, JSX 기본 문법을 익힌다.

  1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함된다.
  2. 엘리먼트 클래스 사용 시 className으로 표기한다.

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

  3. JavaScript 표현식 사용 시 {중괄호}를 이용한다.

  
  <div className="tweet__profile">
      <img src={tweet.picture}></img>
  </div>

  4. 사용자 정의 컴포넌트는 대문자로 시작한다. (PascalCase)
  5. 조건부 렌더링에는 삼항연산자를 사용한다.

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

  6. 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용한다. 반드시 "key"JSX속성을 넣어야 한다.

  
  {dummyTweets.map((tweet) => {
      return (
      	<li className="tweet" key={tweet.id}
              <div className="tweet__profile">
              	<img src={tweet.picture}></img>
              </div>
          </li>
      );
  })}

• 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.

  Yes ! 😮

• 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.

  OK ! 👌

• npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.

  Yes 😁