Front-end/React.js

2. 컴포넌트 제작 - React 기초 | 생활코딩

AGAL 2020. 2. 14. 00:59
반응형

[출처 : https://opentutorials.org]

11. 컴포넌트 만들기

# 컴포넌트를 만들 때는 하나의 최상위 태그만 써야 한다.

class Subject extends Component {
  // class 안에 소속되는 함수는 function 생략    *function render()와 같음
  render() {    
    return(
      // 최상위 태그
      <header>
        ...
      </header>
    );
  }
}

 

# 위 코드는 유사 자바스크립트이다   

 - jsx(페이스북에서 만든 컴퓨터 언어)로 코드를 작성하면 create-react-app이 js 코드로 converting(변환) 해준다.

 

# 리액트는 코드 정리정돈의 도구

- 컴포넌트의 이름에 집중함으로써 코드의 복잡성을 획기적으로 낮춰준다.

 

12. props

# 태그의 이름이라는 공통점과 속성이라는 차이점을 통해 재사용성이 높은 부품(태그)을 만들 수 있다.

// 리팩토링 
<h1>{this.props.title}</h1>    // WEB
<p>{this.props.sub}</p>    // world wide web!

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

 

13. React Developer Tools

 - 사용 설명서를 볼 줄 아는 것. 

 - 현재 상태를 측정하고 분석하는 것 (가설을 세워 여러가지 도구를 이용해서 확인하고 결론을 내리는 것)

 - 다른 사람에게 질문하고 검색하는 것.

 

# React Developer Tools Download

 

14. Component 파일로 분리하기

 

컴포넌트(.js 파일) 만들기

만들려는 컴포넌트 파일 상단에 아래처럼 코드 입력     * 파일명은 대문자로 시작한다.

import React, { Compoent } from 'react';

 - React : react로 코딩할 때는 필수적인 것
 - { Compoent } : component라는 클래스를 로딩한 것
 - form 'react' : react라는 라이브러리에서

 

# 컴포넌트를 외부에서 사용할 수 있도록 허용

  : 만든 파일의 하단에 아래처럼 코드 입력

export default TOC;

 - export :

 - default : 

 - TOC : TOC.js 파일을 사용하는 곳에서 TOC라는 클래스를 사용할 수 있게 한다.

 

컴포넌트 가져오기

만든 컴포넌트를 사용하려는 파일(App.js)의 상단에 아래처럼 코드 입력

import TOC from './components/TOC';

- TOC : 가져오려는 클래스(컴포넌트) 이름

- './components/TOC' : 가져오려는 파일 경로    * 파일명은 .js 생략 가능

반응형