React

페이스북이 웹 개발을 쉽게 하기 위해 반든 기술입니다.

장점

• 단순한 앱개발 : React는 순수 자바스크립트로 만든 컴포넌트 기반 아키텍쳐이다.
• 빠른 UI : 가상 DOM 제공
  코드량 감소 : React 머큐니티와 개발 생태계를 통해 수많은 라이브러리와 컴포넌트를 접할 수 있다.

단점

• React는 단방향 데이터 바인딩만 제공한다.
• React는 다른 프레임워크처럼 성숙하지 않다.
• React는 모든 기능을 갖춘 프레임워크는 아니다. 여러 라이브러리를 같이 사용해야만 한다.

JSX

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로 특히 React.createElement를 반복적으로 호출하는 불편을 해소한다.

JSX와 HTML의 차이점

태그 특성은 낙타 표기법
html

<input type="text" maxlength="30">

JSX

return <input type="text" maxLength="30"/>

1. JSX의 경우 style 등 모두 낙타표기법으로 작성해야 함
2. 모든 태그는 짝이 맞아야 함(모두 닫는 태그가 있어야 함)
3. 특성 이름이 HTML 언어 사양이 아닌 DOM API에 기반을 둔다.

---

설치

terminal 을 이용하여 설치한다.

yarn 설치

npm install --global yarn

리액트 앱 설치

npm or yarn 으로 설치(하나만 해도 된다)

npm install -g create-react-app

yarn global add create-react-app

리액트 프로젝트 생성

1. 리엑트 프로젝트 생성

create-react-app 프로젝트이름

2. 생성한 프로젝트로 이동

cd 프로젝트이름

3. 프로젝트 실행(npm / yarn 둘 중 하나로 실행)

npm start

yarn start

---

리액트 실행!

• 리액트의 경우 기본적으로 3000번대 포트 번호를 사용한다.
• 실행중에 다른 파일을 실행 시 3001 번으로 포트가 자동 설정 된다.

초기화면

Index.js

화면에 표시되기 위해서는 index.js에서 호출해줘야 한다.

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

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

// 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();

아래처럼 화면에 표시되기 위해 호출할 함수를 명시해줘야 한다.

<React.StrictMode>
  <호출할 함수/>
</React.StrictMode>

App.js

• 위 페이지에서 <호출할함수/> 에 있었던 App에 해당한다.
• 아래 코드에서 보이는 function App(){ ~~~ } 가 react에 보이는 기본 틀이다.
• 기본 틀은 'rsf' 로 바로 기입 가능하다.
• 가장 아래 export default App; 으로 export 한다. 그걸 위의 Index.js 에서 import 받아 화면에 띄우는 것이다.
• React의 경우 가장 바깥쪽 div 태그 하나만 return 가능하다. 즉 기준이 되는 div 태그 안에 모든걸 다 표시해야 한다.

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;

App.css

• 다른 파일에서 css를 사용하기 위해서 무조건 import 받아와서 사용해야 한다.
• App.css 에 작성된 스타일은 어디서든 import 상관 없이 바로 사용 가능하다.