[ React ] #2

부리또의 댄스·2024년 1월 30일

목록 보기

2/6

✣ 생활코딩(인프런) - React ✣

Section 2. 컴포넌트 제작

2-1) 리액트가 없다면

위의 코드에서 <header>, <nav>, <article> 태그는 Semantic Tag라고 하는 것으로, 아무 기능을 하지 않지만 해당 코드가 어떤 부분인지 의미론적으로 알려주기 위해 사용하는 개발자의 가독성을 높여주는 태그이다.

그런데 이렇게 코드를 작성할 때, 태그 안에 있는 코드가 천만 줄 정도 된다면 코드를 작성하기가 매우 불편할 것이다.
이러한 경우에 사용하는 것이 바로 우리가 지금 공부하는 'React'이다. React는 태그 안의 전체 코드를 숨겨주어, 태그만으로 기능을 사용할 수 있게 해준다.

즉, React는 일종의 "단축키"인 것이다.

2-2) 컴포넌트 만들기 1

위에서 작성한 코드를 React로 정리정돈 해보자.

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    )
  }
}

다음과 같이 객체 느낌으로 'Subject'태그를 작성해주면 되는데, 작성 시에 몇 가지 규칙이 있다.

컴포넌트 작성 규칙

1)
class (태그명) extends Component {...}
이름 부분은 'Component'라는 객체를 상속받는 형태로 작성해야 하며, 태그명은 대문자로 시작해야한다.

2)
render() {...}
'render' 함수를 꼭 작성하고, 그 안에 내용을 작성해야 한다.

3)
예시에서 <header> 태그처럼 최상위 태그를 작성해야 한다.

이렇게 규칙에 맞게 작성을 완료하면, 만든 태그를 실제로 사용할 수 있다.

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

태초에 React 파일을 다운로드 받아서 열어보면 위와 같은 'App' 객체의 코드가 이미 존재해있는데, 이 코드 안에 우리가 만든 태그를 작성하면 된다.

작성을 하고 나서 리액트 앱을 새로고침 한 후, 개발자 도구에서 element를 열어 html 코드를 확인하면 위와 같이 우리가 만든 태그가 실제 코드로 대치되어 들어가있는 것을 볼 수 있다.

여기서 주의할 점은, 위에서 작성한 'Subject' 객체의 코드는 javascript언어가 아니라는 것이다. 실제로 크롬의 콘솔에 해당 코드를 입력해보면 에러가 뜨는 것을 알 수 있다.

코드 작성을 편리하고 간결하게 하기 위해 페이스북에서 만든 jsx코드를, javascript로 convert해주는 것이다.

2-3) 컴포넌트 만들기 2

위와 같이 기존 'pure.html' 코드에 있던 'Toc' 태그와 'Content' 태그도 만들어준다.

2-4) props

또 하나의 중요한 기능인 props를 적용해보자. 위에서 한 것에서 나아가 코드를 더욱 간결하고 객체지향적이게 하는 기능이다.

일단 코드를 어떻게 수정해야 하는지 미리 보자.

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

위와 같이 'Subject' 객체를 수정해주고,

<Subject title="WEB" sub="world wide web!"></Subject>

메인이 되어 웹 앱에 반영되는 'App' 객체에는 기존에 태그만 작성되어 있었던 것 사이에 위와 같이 코드를 추가해준다.

지금까지 java나 C++과 같은 언어에서 사용했던 것처럼, this는 해당 객체의 요소를 가리킨다.

" props는 부모 컴포넌트에서 데이터를 받아오는 역할을 한다. "

그러므로 this.props.title이라고 하면, 부모 컴포넌트의 'title' 값을 받아오는 것이다.

props 사용 방법
{this.props.(변수 이름)}

양끝의 중괄호도 잊지 말고 써줘야 한다. jsx코드이라는 것을 알려주는 역할을 하기 때문이다.

2-5) React Developer Tools

더욱 편리한 React 개발을 위해 chrome에서 추가적인 프로그램을 설치해준다.

설치를 완료하고 개발자 도구에서 탭 목록을 보면, ⚛️ Components 탭이 새로 생성되어 있다.

이렇게 react로 작성한 코드를 볼 수 있다.

즉, 원래 개발자 도구의 Console에서는 html 코드로 대치된 코드만을 볼 수 있었지만, React Developers Tool을 통해 대치되기 전에 우리가 작성한 React 코드를 볼 수 있다. 더불어 컴포넌트의 코드를 수정할 수도 있다.

2-6) Component 파일로 분리하기

C나 Java등에서 헤더파일을 분리하는 것처럼, javascript에서도 component 파일을 메인 코드에서 따로 분리할 수 있다.

먼저 다음과 같이 분리할 .js파일을 만들어준다.

<TOC.js>

import React, { Component } from 'react';

class Toc extends Component {
    render() {
      return (
        <nav>
          <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
          </ul>
        </nav>
      )
    }
  }

  export default Toc;

원래 코드를 해당하는 새 파일에 그대로 붙여넣기 해준 후(중간 부분), import코드와 export코드를 작성해준다.

위에서의 import 코드는 'component'를 사용하기 위한 것이고, export가 중요한 부분으로 새로 분리한 파일을 외부에서 끌어와 사용할 수 있게끔 export 해주는 것이다.

<App.js>

import React, {Component} from 'react';
import TOC from "./components/TOC";
import Content from "./components/TOC";
import Subject from "./components/TOC";
import './App.css';
...