[React] React 기본(2) - React 기본구조

React 시작 하기 

- 다음과 같이 명령어를 쓰면 webpack & babel을 한꺼번에 쓸 수 있음 

- 마지막의 "." 의미? 현재 폴더 안에 react를 시작하겠다~ 

npx create-react-app .

 

---

React 기본 구조 

- return함수에 jsx문법(HTML처럼 생긴 ) 를 그대도 넣어주면 됨 

- 태그에 class를 주고 싶을때는 <div className="클래스명"> 

 

App.js 

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

function App() {
  let name = "React App" 
  return (
    <div className="App">
      <h4> {name} </h4>
    </div>
  );
}

export default App;

 

 

(1) 만약에 css파일을 적용하고 싶다? ClassName 지정 

App.css (className="App" in App.js)

.App {
  text-align: center;
}

 

(2) 데이터 바인딩을 하고 싶다?

- let선언 -> {변수명} 중괄호를 사용하여 Data Rendering을 시켜줌  

- 함수 선언 function() -> {함수} 넣으면 실행 가능 

 

 

 

---

npm이 아니라 왜 npx를 사용할까?

- npm을 이용시 global로 다운받음

- npm을 통해서 모듈 선택시 -g (global) 모듈을 설치하면 매 프로젝트마다 모듈을 설치해줄 필요가 없다는 장점. 

- 하지만! 개발자 입장에는 좋지않음

 (1) 모듈이 업데이트 되었는지 안되었는지 확인 불가

 (2) 업데이트 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있음

 (3) create-react-app같은 보일러 플레이트에는 치명적 

npm install -g create-react-app

- npx를 이용하면 node registry에 있는 것을 바로 가지고 와서 쓸 수 있음 

 장점 (1) disk space를 아낄 수 있고 (2) 항상 최신 버전의 것을 사용할 수 있음  

npx create-react-app .

 

 

NPM(Node Package Manager)이란? - 라이브러리를 담고 있는 곳이 registry  - application을 켤 때  배포를 할때 npm run start / npm run build   - npm install " " -> ./node_modules/.bin directory에 링크 생성

 

---

React Start 하기

- package.json 파일의 scripts 파일에  start / build / test / eject와 연관이 있음 

npm run start

 

 

App.js 

- React를 시작하게 되면 App.js 파일이 Rendering되게 되면서 위와 같은 화면이 나옴 

 

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

index.js 

- App()이 rendering 됨  = index.js에서 index.html의 'root'에 App.js를 렌더링 시킴 

- ReactDOM.render()안에 보여 주고 싶은 component를 넣으면 됨 

- ReactDOM.render()이란?

--> 컴포넌트를 페이지에 렌더링하는 역할을 하며. react-dom 모듈을 불러와 사용할 수 있음 

--> 첫번째 파라미터에는 페이지에 렌더링할 내용을 jsx 형태로 작성하고, 두번째 파라미터에는 해당 jsx를 렌더링 할 document 내부 요소를 설정함. id가 root인 요소 안에 렌더링 하도록 설정(public/index.html 파일 참고)                    

 

<render() 공식문서>

ReactDOM.render(element, container[, callback])

 - 첫번째 파라미터를 두번째 파라미터에 렌더링 

  - React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환
  - React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경

 

 

<예제> 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

cf) <React.StrictMode>? Application 내의 잠재적인 문제를 알아내기 위한 도구 , Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고 활성화 

 

 

index.html 

- 'root'를 쓸 수 있는 이유? index.html에서 명시 

 

 

 

---

<참고> 

Fragment 컴포넌트

- div를 쓰고 싶지 않을 때 사용함 

import React, {Fragment} from 'react'; 

const App = () => {
  return(
    <Fragment>
    <h1> Hello React</h1>
  </Fragment>
  )
};

export default App;

 

 

<출처> 

1. ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx 

2.