React 기초-creat react app, jsx

환경 설정

npx를 사용해서 파일들을 만들었다. npx를 사용한 이유는 한번만 사용해서이다.

그리고 npm start를 하고 localhost:3000에 접속하면

내 서버와 연결된다.

 

localhost

그리고 src에 있는 App.js의 파일을 수정하면 localhost:3000 페이지가 바뀐다.

그치만 html이 아니고 js에서 어떻게 화면을 띄우는지 궁금하다.

=> App 함수에서 리턴하는 값이 html body의 자식으로 들어가서 그렇다.

 

자세히 살펴보면 index.js에서 App.js를 import로 받아온다. 그리고 index.js 안에 있는 reader 함수는 화면에 그려주라는 함수이다. readner로 root에 넣어주라는 것이다. index.html에 있는 id가 root인 div에 App.js에 있는 내용이 들어간다.

 

node_modules

node_modules는 용량이 크다. 그래서 처음에 다 다운 받았다. 하지만 이 파일을 깃허브나 메일로 보낼 때 같이 보내면 한 세월이 걸린다. 다행이도 package-lock.json과 package.json에 명시가 되어있어서 꼭 필요하진 않다.

그럼에도 나중에 필요한 일이 생기면 npm i를 하면 다시 설치가 된다.

---

JSX(자바스크립트 표현식 익스텐션) 

js와 html을 합쳐서 사용할 수 있는 문법을 jsx라고 부른다.

import "./App.css";

function App() {
  let name = "홍길동";

  return (
    <div className="App">
      <header className="App-header">
        <h2>안녕 리엑트 {name}</h2>
      </header>
    </div>
  );
}

export default App;

리엑트에서는 이렇게 jsx로 html 문법을 만들어낸다.

 

이렇게 하면 다른 파일에서도 이것을 사용할 수 있다

=> 컴포넌트 방식이다.

 

export default App; 이렇게 export default로 내보내면 다른 파일에서 import 이름 from 파일경로 이렇게 사용 가능하다. 그리고 export default는 1개만 내보낼 수 있다.

 

-적용법

const MyHeader = () => {
  return <header>헤더</header>;
};

export default MyHeader;

MyHeader.js 파일을 만들고 내보냈다.

 

import "./App.css";
import MyHeader from "./MyHeader";

function App() {
  let name = "홍길동";

  return (
    <div className="App">
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리엑트 {name}</h2>
      </header>
    </div>
  );
}

export default App;

그리고 App.js에서 받으니까

이런 결과가 나온다.

 

jsx에서 html, css 문법

1. 셀프 클로징

모든 태그는 닫혀야한다.

<br />
<image />

이런식으로 열자마자 닫아야한다.

 

2. 최상의 태그 규칙

 <div className="App">
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리엑트 {name}</h2>
      </header>
    </div>

이 중에서 가장 밖에 있는 것이 최상위 태그라고 생각하면 된다. 즉 div이다.

만약 div를 지우면 에러가 발생한다. jsx 태그들은 반드시 부모를 가져야한다.

 

만약 최상의 태그를 하고싶지 않으면

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

import MyHeader from "./MyHeader";

function App() {
  let name = "홍길동";

  return (
    <React.Fragment>
      <MyHeader />
      <header className="App-header">
        <h2>안녕 리엑트 {name}</h2>
      </header>
    </React.Fragment>
  );
}

export default App;

맨 첫줄로 리엑트를 불러온다. 그리고 <React.Fragment> 태그로 감싸주거나 그냥 빈 태그 <>와 </>를 두면된다.

 

3. css 가져오기

이런식으로 import해서 css를 가져올 수 있다.

 

4. css inline으로 하기

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

import MyHeader from "./MyHeader";

function App() {
  let name = "홍길동";

  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
  };

  return (
    <div style={style.App}>
      <MyHeader />
      <header className="App-header">
        <h2 style={style.h2}>안녕 리엑트 {name}</h2>
      </header>
    </div>
  );
}

export default App;

객체 형식으로 css를 만들고 각 태그마다 적용해줘야한다.

 

5. js 문법 활용하기

{} 안에는 숫자나 문자열 이외에는 못 넣는다. 하지만 삼항연산자는 넣을 수 있고 많이 사용된다.