React (1) 기본 개념

2020-06-22

TIL
react

React

React의 처음 목적은 UI를 편하게 제작하기 위함.
이 부분에 초점을 두고 공부를 하면 이해가 쉬울 듯 하다.

Component

Component는 사용자 정의 태그. 기존에 있던 태그들의 묶음이라고 볼 수 있을 듯.
Component의 장점은 대충 다음과 같다.

가독성
재사용성
유지보수

React의 주요 기능은 이 component를 동적으로 생성하는 것.

Create React App

주로 실습용으로 사용되는 Toolchain.
초기 설정이 따로 필요 없어서 매우 편리하다. webpack 초기 설정은 엄청 복잡했는데.
얘도 파일을 수정하고 저장할 때마다 자동으로 페이지를 reload하는 기능이 있다더라.

npm install -g create-react-app
create-react-app .

근데, 사실 npm을 이용해서 global install을 하는 건 별로 좋지 않은 방법.
두 가지 단점이 있다.

버젼이 업데이트 되면 새로 설치해야 함.
create-react-app 라이브러리가 생각보다 무거운데, 그것들이 컴퓨터에 남아있게 된다.

그래서 실무에서는 주로 npx를 활용한다고 하더라.
npx create-react-app [디렉토리]를 하면 create-react-app을 1회용으로 설치한 후 실행하고, 지워버리는 것까지 알아서 해준다.
그래서 항상 최신 버젼을 사용할 수가 있게 된다.

Directory 분석

Create React App 프로젝트 폴더의 디렉토리는 크게 public과 src로 나눠진다.
public 은 index.html이 위치하는 곳.
이 public은 npm run start를 실행했을 때 찾아가는 document root이기도 하다.

index.html의 <div id = "root">에 주목하자.
우리가 react를 통해 만든 Component들이 들어가는 곳이 바로 저 root div이다.

그러면 그 Component들은 어디서 만들면 되느냐?
바로 src 디렉토리 안의 파일들로 만들어주면 된다.
src 폴더 안에 있는 index.js가 진입 파일(entry 파일).

index.js에서 주목할 건 바로
ReactDOM.render(<App />, document.getElementById('root'));.
여기서 <App />이 바로 react를 통해 만든 사용자 정의 태그, 즉 component.
App이라는 컴포넌트를 root라는 id를 가진 태그 안에다가 렌더링 시켜서 집어넣는다는 뜻인듯.

위에 import문에 보면 import App from './App';이 보임.
App이라는 component의 실제 구현은 저 App.js라는 파일에 되어 있다.
그 파일에 가보면 알 수 있듯이

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>
  );
}

return문 안에 있는 내용이 App이라는 component, 즉 사용자 정의 태그의 실제 내용이다.

App.js에 보면 import './App.css';도 있음.
App이라는 component의 디자인을 css 파일로 작성하여 적용한다.

index.css는 index 페이지 전체의 css.
App.css는 App이라는 component만의 css.
하나의 페이지에 왜 css 파일이 여러 개였는지 드디어 알게 됨.

React 주의할 점

component를 만들 때는, 즉 return문 안에서는
반드시 모든 태그가 하나의 태그 안에 포함되어 있어야 한다.
즉, 가장 바깥쪽에는 하나의 태그만 있어야 한다.

Deploy

나중에 웹 서비스로 배포할 때는 npm run build를 통해 빌드하면 build라는 폴더가 생성된다.
웹 서버의 최상위 디렉토리에다가 build 디렉토리 안에 있는 파일들을 위치시키면 된다.

npm run start를 할 때 찾아가는 최상위 디렉토리가 public이었던 것 처럼
npm run build를 통해 deploy를 할 때 사용되는 최상위 디렉토리가 build 인 것.

예전에, 무작정 React를 사용해보자 하고 했을 때 몰랐던 것들이 조금씩 보이는 듯.
왜 css 파일들이 그렇게도 많았는지. Component가 도대체 뭔지.
왜 이렇게 타고 타고 들어가는 복잡한 구조를 하고 있는지.
대충 전체적인 맥락이 잡히는 것 같은 느낌.

 첫 글 공부 생각 