[ReactJS] React 기본 코드 구조 및 component 생성

React를 공부하며 정리한 내용입니다. 

---

 

React 언어는 JSX (Java script 확장판)이다.

 

- 중괄호 내에 모든 java script 코드를 넣을 수 있으며 중괄호를 사용해 attribute를 정의한다. 

const element = <img src={user.avatarUrl}></img>;

 

-사용자의 입력을 삽입할 수 있다. 

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

 

-jsx는 태그를 꼭 닫아줘야하는데 태그 내에 아무것도 없다면 self-closing을 이용한다.

<Hello />

 

React의 가장 작은 단위는 컴포넌트를 이루는 앨리먼트(element)이다.  

 

- 두 가지 예시는 동일한 React element 객체를 생성한다. 공식 다큐먼트는 아래의 Babel 방식을 추천했다. 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//Babel

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

 

React 컴포넌트(Component)란 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것이다.

 

- 함수 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다.  

** argument 대신 props라는 용어를 쓴다. **

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

- 클래스 컴포넌트는 상위 클래스에서 props 객체인자를 받아 element를 반환하여 렌더링한다. 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

- 하위 클래스 컴포넌트로 객체인자 전달 

<Welcome name = "WEB"></Welcome>

컴포넌트의 이름은 항상 대문자이다.

 

- Component의 렌더링 과정 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

 

1) <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출합니다.

2) React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.

3) Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.

4) React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

 

 

React 기본 템플릿 

 

▷ public/index.html

<div id="root"></div>

 - 앱 내의 모든 element들은 id가 root인 코드 내에서 정의한다. 

하나의 앱에서 정의된 element들은 하나의 React DOM에서 관리하기 때문에 이를 “루트(root)” DOM 노드라고 부른다. 

 

 

▷ index.js

import React from 'react';
import ReactDOM from 'react-dom';

- react : UI를 위한 라이브러리

- react-dom : 웹 브라우저에 react를 렌더링(출력)하기 위한 모델 

 

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

 

- React 엘리먼트를 루트 DOM 노드에 렌더링 하기 위해서는 render() 함수의 첫 번째 인자에 넣어야한다.

- React element가 한번 렌더링된 이후에는 변화하지 않기 때문에 새로운 element를 생성하여 render()함수를 호출해야한다.

하지만 React DOM은 해당 엘리먼트와 기존 엘리먼트를 비교해 변화한 부분만 업데이트 한다. 

 

 

▷ App.js (최상위 컴포넌트)

import { Component } from 'react';

-  react 라이브러리에서 Component class를 로딩한 것을 의미한다. 

 

export default App;

-  외부에서의 App class 사용을 허용한다는 의미

- 다른 class component 에서 사용하려면 꼭 정의해야한다.

 

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

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

export default App;

- ReactDOM이 렌더링하는 클래스 컴포넌트를 의미한다.

 

 

React Component 예시  

 

1) Component 생성 

App class component 내 element들을 Subject,Toc component로 만들어 사용했다. 

 

- component 적용 전 

class App extends Component {
  render(){ 
    return(
    <div className="App">
     <header>
    <h1>
      WEB STUDY
    </h1>
    </header>
      <nav>
    <ul>
      <li><a>React basic</a></li>
      <li><a>React intermediate</a></li>
      <li><a>React Advanced</a></li>
    </ul>
    </nav>
    </div>
  );
    }
  }

 

- component 적용 후

class App extends Component {
  render(){ 
    return(
    <div className="App">
    <Subject></Subject>
    <toc></toc>
    </div>
  );
    }
  }

 

class Subject extends Component {
  render(){ 
    return(
    <header>
    <h1>
      WEB STUDY
    </h1>
    </header>
  );
}
}

class Toc extends Component {
  render(){ 
    return(
    <nav>
    <ul>
      <li><a>React basic</a></li>
      <li><a>React intermediate</a></li>
      <li><a>React Advanced</a></li>
    </ul>
    </nav>
  );
}
}

 

2) Component parameter 전달 

 

- 전달 받은 parameter 표시

{this.props.title}

 

- parameter 전달

<Subject title = "WEB STUDY" subtitle = "We can do it"></Subject>

 

-전체 예시 

APP component에서 Subject component로 title, subtitle의 parameter를 전달한다.

class Subject extends Component {
  render(){ 
    return(
    <header>
    <h1>
      {this.props.title}
    </h1>
    <h5>
      {this.props.subtitle}
    </h5>
    </header>
  );
}
}

class App extends Component {
  render(){ 
    return(
    <div className="App">
    <Subject title = "WEB STUDY" subtitle = "We can do it"></Subject>
    <Menu></Menu>
    </div>
  );
    }
  }

  export default App;

 

일반적으로  src 내에 components 폴더를 생성해 component들을 관리한다. 

 

- components 폴더 내 Subject.js를 사용한다. 

import Subject from './components/Subject';

 

-전체 코드 예시 

import logo from './logo.svg';
import './App.css';
import { Component } from 'react';
import Subject from './components/Subject';

class App extends Component {
  render(){ 
    return(
    <div className="App">
    <Subject title = "WEB STUDY" subtitle = "We can do it"></Subject>
    <Menu></Menu>
    </div>
  );
    }
  }

  export default App;

 

import { Component } from 'react';

class Subject extends Component {
    render(){ 
      return(
      <header>
      <h1>
        {this.props.title}
      </h1>
      <h5>
        {this.props.subtitle}
      </h5>
      </header>
    );
  }
  }

export default Subject;

 

---

참고 및 출처 

 

ko.reactjs.org/docs/hello-world.html

Hello World – React

opentutorials.org/module/4058/24737

컴포넌트 제작 - React