G's days

[정리]21/08/20~22 React (2) 본문

일지

[정리]21/08/20~22 React (2)

Hi☆G 2021. 8. 21. 12:30

        왜 React가 필요한가? 왜 React를 쓰는 것이 편리한가? 

 

react없이 pure html 파일을 만들어보자.

 

<html>
    <body>
<        <header>
            <h1>WEB</h1>
            World Wide wEb!
        </header>
        <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>
        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>
    </body>
</html>

 

만약 헤더 안의 내용이 1만 줄이라면?
그 내용을 묶어서 태그 하나로 표현할 수 있다면 좋을 것이다.
마치 JavaScript에서 함수를 정의하고 계속 재사용하는 것처럼 말이다!

        위의 코드를 React를 사용해서 정리해보자. 

 

-> 컴포넌트 만들기

(내가 만든 태그가 내가 지정한 정보를 담게 된다!)

// 풀어서 이해하기
// React가 가지고 있는 'Component라는 class'를 상속해서 'App이라는 새로운 class'를 만든다.
// 그 클래스는 render라는 메서드를 가지고 있다.

// 규칙
// Class에 소속되는 함수는function이 생략된다.
// 하나의 최상위 태그로 시작되어야(쓰여야) 한다.

// Header와 메뉴 목록을 컴포넌트로 만들어 보자.

class Subject extends Component {
  render() {
    return(
      <header>
            <h1>WEB</h1>
            World Wide Web!
      </header>
    );
  }
}

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>
    )
  }
}
// 위에서 만든 컴포넌트를 사용해보자.
class App extends Component {
    render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

// 웹브라우저에서 개발자도구 element탭을 확인해보면 위에서 지정한대로 잘 나오는 것을 확인할 수 있다.

 

        Props 

 

언제나 똑같이 나오는 태그는 쓸모가 적다. 그래서 속성을 붙이고 싶다.

(태그와 태그의 속성(attribute)를 만들 수 있다.)

(JSX에서 attribute의 역할을 하는 것을 props라고 한다.)

 

실습) <Welcome name="somebody">로 사용하려면 아래처럼 컴포넌트를 정의하자.

// 두 가지 방식은 React의 관점에서 똑같다.

// JavaScript함수를 사용한 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// ES6 class를 사용한 컴포넌트 정의
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

        React Developer Tools 

 

Chrome 확장프로그램

컴포넌트 단위로 코드를 볼 수 있다.

 

        Component를 파일로 분리하기 

 

다른파일에서도 component를 이용할 수 있게 하고 싶다.

그렇다면 각각의 component별로 파일로 분리해서 저장하자.

 

// src폴더 하위에 components폴더를 만들고 그 안에 Subject.js파일을 생성한다.

//React에서 Component클래스 불러오기
import React, {Component} from 'react';

//정의하고자 하는 컴포넌트
class Subject extends Component {
    render() {
      return(
        <header>
              <h1>{this.props.title}</h1>
              {this.props.sub}
        </header>
      );
    }
  }
  
// 외부에서 사용할 수 있게 한다.
export default Subject;
// 만든 컴포넌트를 불러오기

import Subject from "./components/Subject";
// Subject.js파일이 있는 경로를 써준다.

 

 

 

 

 

 

본 포스팅은 생활코딩 React강의 내용을 바탕으로 작성되었습니다.

'일지' 카테고리의 다른 글

[정리]21/08/20~22 React - create,update,delete (4)  (0) 2021.08.22
[정리]21/08/20~22 React - state, 이벤트 (3)  (0) 2021.08.21
[정리]21/08/20~21 React (1)  (0) 2021.08.20
[정리]21/08/15~16 Database-MySQL (생활코딩)  (0) 2021.08.15
피드백 + 계획 + 주말에 바닐라JS로 크롬앱 만들기  (0) 2021.08.09
'일지' Related Articles more