Unit4 - [React] Intro

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

선언형 

명시적으로 작성 ( 코드의 의도를 알수있다.)

 

컴포넌트 기반

하나의 기능 구현을 위해 여러 종류의 코드를 묶어둠(독립적 , 재사용)

 

범용성

Javascript 프로젝트 어디에든 적용

 

JSX(JavaScript XML)

react에서 UI를 구성할때 사용하는 문법(자바스크립트를 확장한 문법)

 

Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일

JSX -> babel -> js -> browser

 

React DOM(css , jsx)

JavaScript 문법과 HTML 문법을 동시->기능과 구조를 한번에 확인

JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치

 

JSX 없이도 React 요소를 만들수 있지만 코드 복잡 ,가독성 떨어짐

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

function App() {
  const user = {
    firstName: "so",
    lastName: "ysy"
  };

  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;

JSX 활용

하나의 elment안에 모든 엘리먼트가 포함되어야한다.

<div>
 <div>
   <h1>hi</hi>
 </div>
 <div>
   <h2>so</h2>
 </div>
</div>

 

css속성 지정하기 

원래 class="xxx" -> className = "xxx" (class로 작성하면 JavaScript클래스로 인식)

<div class = "xxx">hi</div>

<div className = "xxx">hi</div>

javaScript를 쓸려면 { } 를 이용 ({ } 안쓰면 일반 텍스트로 인식)

functin App(){
 const name = 'so';
 
 return {
  <div>
    hi {so}!
  </div>
 };
}

대문자로 시작(소문자로 시작하면 HTML element로 인식)

function Hi(){
   return <div>hi</div>
}
function So(){
  return <So />;
}

 

조건부를 쓰고 싶으면 삼항연산자를 써야한다.(if문 x)

<div>

 {

     (1+1 ===2) ? (<p>pass<p>) : (<p>fail<p>) 

 }

</div>

 

여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수("key" jsx속성을 넣어야함)를 사용("key" jsx속성 안쓰면 경고표시)

function Movieintroduce(){
 const content = movies.map(movie) =>
  <div key={movie.id}>
    <h1>{movie.title}</h1>
    <p>{movie.content}</p>
}

return 안에 map메서드넣을 수도있다.

export default function App() {
  // 영화 정보를 담은 객체 movie를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 convertJSX
  const convertJSX = (movie) => { //객체 movie
    return (
      <div key={movie.id}>
        <h3>{movie.name}</h3>
        <p>{movie.content}</p>
      </div>
    );
  };

key 속성값은 가능하면 데이터에서 제공하는 id를 할당

id X -> 배열 인덱스 넣어서 해결(최후의 수단)

map메서드

function Movieintroduce() { //Movieintorduce함수
  const movietToElement = (movie) => ( //movie객체
    <div>
      <h3>{movie.title}</h3> //movie제목
      <p>{movie.content}</p> //movie내용
    </div>
  );

  const movieintroduces = movies.map(movieToElement); //movies를 매핑

  return <div className="movie-wrapper">{movieintorduces}</div>;
}

 

Componet :하나의 기능 구현을 위한 여러 종류의 코드 묶음(UI의 한부분 담당)

컴포넌트를 여러개 만들고 조합 -> 어플리케이션 완성

 

리액트 애플리케이션 -> 최소 한개의 컴포넌트(root)는 다른 컴포넌트를 가진다(tree구조)

 

헤더 -> 사이드바로 바꾸고싶다.변경할려는 UI를 맞추어  컴포넌트 위치만 수정

 

Creat reat app리액트 SPA를 쉽게 빠르게 개발할수 있도록 만들어진 툴 체인

 

? 리액트 SPA :

 

npx create-react-app 폴더이름 설치

react 설치 , react - dom (실제로 렌더링 할수 있도록 도와줌),react-script,관련 패키지 등

create-react-app 는 저장과 동시에 화면을 확인

function App() {
  const proverbs =["좌절감으로 배움을 늦추지마라","Stay Hungry Stay Foolish","누군가를 위해 당신의 삶을 허비하지 마세요","빼앗긴 들에도 봄은 온다.","계획이란 미래에 대한 현재의 결정이다","아마추어는 문제를 복잡하게 만들고,프로는 문제를 단순화시킨다.","Memento mori"];
  
  const getRadomIndex = (length) =>{
    return parseInt(Math.random()*length);
  }
  return (
   
    <div className="App">
      <header className="App-header">
        {proverbs[getRadomIndex(proverbs.length)]}

      </header>
    </div>
  );
}

export default App;

 

---

React Twittler Intro

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : 메세지 아이콘을 작성합니다. */}
      <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">
          {/*TODO : dummyTweet로 전달되는 데이터의 갯수를 보여줍니다.*/}
          {'total:' + dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

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) => { {/*dummyTweets의 타입은 배열 그안에 엘리먼트는 객체 */}
      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">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
              <img src ={tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/*삼항 연산자를 써야된다. */}
                <span className={tweetUserNameClass}>{tweet.username}</span>
                {/*tweet.username === "parkhacker" ? <span className="tweet__username tweet__username--purple">{tweet.username}</span>:<span className="tweet__username">{tweet.username}</span>*/}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
                <span class="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              TODO : 트윗 메세지가 있어야 합니다.
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
          
        );
      })}
    </ul>
  );
};