엘리스 46일차 월요일 실시간 강의 React.js

치즈말랑이·2022년 6월 6일

엘리스

목록 보기

38/47

이고잉님 강의

create-react-app에서는 index.js를 가장 처음 읽는다.

리액트 개발환경 설치
npx create-react-app@latest .

리액트는 사용자 정의 태그를 만드는 기술이다.
리액트에서는 사용자 정의 태그를 컴포넌트라고 부른다.
컴포넌트를 부품으로 조립해서 완제품을 만드는 것이 리액트를 이용한 개발이다.

컴포넌트의 이름은 반드시 대문자
컴포넌트의 return 값은 태그 하나여야만 한다.

리액트 문법은 jsx 언어로 되어있다.
https://ko.reactjs.org/docs/introducing-jsx.html

npm run build
build 폴더 내의 소스파일들이 현재 src 폴더내의 소스들로부터 파생되어 생성되기때문에 따로 버전관리가 필요없다

gh-pages

호스팅할때 사용하는 도구
https://www.npmjs.com/package/gh-pages
npx gh-pages -d build
이렇게하면 연결된 github의 repository에 ph-pages 브랜치가 생성되고, build폴더내의 파일들만 push된다.
이것을 깃허브페이지로 열면 아무것도 안뜨는데, 이건 package.json파일에 "homepage": "https://mcprotein.github.io/elice-sw-2/",를 속성으로 추가해줘야 한다. 즉, 홈페이지에다가 내 깃허브페이지링크를 써줘야한다. 그러면 정상적으로 작동한다.
https://mcprotein.github.io/elice-sw-2/

local-web-server

npm install -g local-web-server 이거로 설치한다.
명령어는 특정 파일이 있는곳에 가서 ws 하면 되는데, npm start와 뭐가다른지 모르겠다.

App.js

import logo from "./logo.svg";
import "./App.css";

function HeaderTag() {
  return (
    <header>
      <h1>
        <a href="/">Webㄴㄴ</a>
      </h1>
    </header>
  );
}

function Nav(props) {
  console.log(props.data);
  const list = props.data.map((e) => {
    return (
      <li key={e.id}>
        <a href={"/read/" + e.id}>{e.title}</a>
      </li>
    );
  });
  return (
    <nav>
      <ol>{list}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
  ];
  return (
    <div>
      <HeaderTag></HeaderTag>
      <Nav data={topics}></Nav>
      <Article title="welcome ho" body="Hello, WEB!"></Article>
    </div>
  );
}

export default App;

코치님 강의

문제1번

컴포넌트

const element = <div>
<h2> hi </h2>
</div>;

ReactDOM.render(element, document.getElementById('root'));

serviceWorker.unregister(); // 앱 배포시 캐시가 남지 않게 하는 코드.

element를 root를 id로하는 element 아래에 넣는다.

문제 2번

//고객의 이름을 출력하는 함수
function formatName(vehicle){
  return vehicle.taxi + ' ' + vehicle.bus;
}

//고객의 이름을 저장하는 변수
const vehicle = {
  taxi: "택시",
  bus: "버스,
}

//인사문구를 출력하는 함수
//formatName()함수를 사용해 출력문구를 완성합니다.
function getTaxi(vehicle) {
  return <h1>Hello, {formatName(vehicle)}!</h1>;
}


//getGreeting()의 결과값을 element에 저장합니다.
const element = getTaxi(vehicle);

ReactDOM.render(element, document.getElementById('root'));

getGreeting은 첫글자가 소문자라서 컴포넌트로 사용할 수 없다. 그래서 함수형으로만 사용해야한다.

문제 3번

function Welcome({food}) {
    return <h2>yummy, {food}!</h2>
}

const element = <Welcome food = "chicken"/>;

ReactDOM.render(element, document.getElementById('root'));