React 초기 화면 뜯어보기 / 기초 학습

컴포넌트 파일 파헤치기!

1. App.js

컴포넌트에 해당하는 코드인 App.js 를 확인해보면

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

이렇게 구성이 되어있다.

코드를 순서대로 살펴보면

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import 한다는 것은 무엇을 불러온다는 뜻이다.
이렇게, import 를 한다는 것은 우리가 webpack 을 사용하기에 가능한 작업이다. 이렇게 불러오고나면 나중에 프로젝트를 빌드하게 됐을 때 webpack 에서 파일의 확장자에 따라 다른 작업을 하게 되는데,

• CSS 파일은 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해주는 작업을 진행한다.
• JS 파일은 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐주는 작업을 진행
• svg 와 같은 사전에 따로 설정을 하지 않은 확장자의 경우, 그냥 파일로서 불러온 다음에 나중에 특정 경로에 사본을 만들어 주고, 해당 사본의 경로를 텍스트로 받아오게 된다.

2. index.js

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

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

우리가 만든 App.js 를 import 를 이용해서 불러와 준다.

그리고 브라우저 상에 우리의 React Component 를 보여주기 위해서는 ReactDOM.render 함수를 사용한다. 첫 번째 파라미터는 렌더링 할 결과물이고, 두 번째 파라미터는 컴포넌트를 어떤 DOM 에 그릴지를 정한다.

코드를 보면 id 가 root 인 DOM 을 찾아서 그리도록 되어 있는데 해당 DOM 은 public/index.html 파일에서 찾을 수 있다.

// public/index.html
<div id="root"></div>

해당 DOM을 찾아서 렌더링을 한다.

3. JSX

HTML 과 비슷한 문법으로 작성하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환시켜준다.

• JSX 안에 자바스크립트 값 사용하기

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div className="App">
		Hello {name}!
      </div>
    );
  }
}

export default App;

• 조건부 렌더링

import React, { Component } from 'react';

class App extends Component {

  printHandler = () => (<div>맞다야아아~!@~!@</div>)

  render() {
    const name = "react!";
    return (
      <div className="App">
        {/* 주석은 이렇게 한다아! */}
        Hello {name}
        {
          1 + 1 === 2
          ? (<div>맞아요!</div>)
          : (<div>틀려요!!!!</div>)
        }
        {
          1 + 1 === 2 && this.printHandler()
        }
      </div>
    );
  }
}

export default App;

간단한 조건들은 JSX 안에서 처리해도 되지만 복잡한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는 것이 좋다!

왜냐하면 render() 함수가 렌더링될 때마다 함수가 생성되기 때문에 성능에 영향을 미칠 수 있다!

---

기초 학습

• ref 를 사용하는 이유
  
  React 에서는 일반적으로 직접 document.xxx 를 이용하여 DOM 에 직접 접근하는 것을 권장하지 않는다. 왜냐하면 React 는 Virtual DOM 을 사용하여 DOM 조적을 추상화하고 컴포넌트 상태를 업데이트하며 UI 를 관리하는데, 직접 DOM 에 접근하면 거기서 나오는 이점이 사라지기 때문이다.
  
  
  그래서 특정 DOM 요소에 접근해야 할 경우 ref 속성을 사용하면 된다.

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef(); // React.createRef()로 생성
    }
    
    render() {
   	    return(
            <input type="text" ref={this.inputRef} />;
        )
    }
}