React.js 기초강좌3 컴포넌트를 알아보자

안녕하세요 엘빈입니다. 저번 포스팅에서는 React.js에서 가장 기본이 되는 JSX 문법에 대해서 알아보았습니다. 대부분의 소스코드들이 JSX를 바탕으로 작성하고 있는데요. 이번 포스팅에서는 React.js에 꽃 컴포넌트에 대해서 알아보겠습니다.

 

 

 

 

 

 

---

포스팅은 "React를 다루는 기술" 책을 바탕으로 정리 및 요약식으로 작성되었습니다.

 

1. 컴포넌트란

 

리액트를 사용하여 웹을 설계할때 인터페이스는 여러가지 컴포넌트로 구성되어 있습니다. 화면에 보이는 모든 구성이 컴포넌트들이 조합되어 이루어져 있다고 생각하시면 되는데요.

 

웹 애플리케이션에서 여러 컴포넌트들은 각자 맡은 기능과 뷰를 가지고 있으며 개별적인 파일로 분리되어 관리되어집니다.

 

 

2. 컴포넌트 생성

 

import React, {Component} from 'react';
// World.js
class World extends Component {
    render(){
        return (
            <div>
              Hello My World!
            </div>
        ) 
    }
}
 
export default World;

컴포넌트를 생성하는 방법은 간단합니다. 자바스크립트 형식으로(js) 파일 하나를 프로젝트 폴더 안에 생성합니다.

 

저의 경우 World.js 를 생성하였습니다. 이후 react를 상속받는 클래스를 생성 후 export 키워드를 이용해 내보내줍니다.

 

 

import React, {Component} from 'react';
import './App.css';
import World from './World';
// App.js
 
class App extends Component{
  render(){
    const text = "Hello World";
    const props = true;
    const style = {
      backgroundColor : 'yellow'
    };
    // 이것은 주석입니다. 주석은 이렇게 사용합니다.
    return (
    <div style = {style}>
      <h1>{text}</h1>
      <World/>
    </div>
    )
  }
}
 
export default App;
 

이후 메인 자바스크립트 파일에 import 키워드를 이용해 World를 불러옵니다. 

 

여기서 World 컴포넌트를 사용하는 방법은 html과 약간 다른데요. 기존의 html은 역슬래쉬를 닫는 태그 키워드 앞에 삽입했다면 컴포넌트 사용시 키워드 뒤에 역슬래쉬를 붙여줍니다.

 

<World/> 이런식으로 작성해주면 됩니다.

 

 

제가 겪은 오류인데 visual code 프로그램 내에서 파일 생성시 접근 권한 때문에 오류가 발생하는 경우가 있었습니다.

 

문법상으로 오류가 없는데 영어 안내로 '선언은 되었지만 가져올 수 없다'는 식으로 나옵니다.

 

이럴 경우 우분투에서 접근 권한을 바꿔주면 됩니다.

 

프로젝트 폴더에 들어간 후 'chmod 777 [파일 이름]'을 명령어로 쳐주시면 됩니다.

 

사실 이 부분은 리눅스를 배워야 합니다. 리눅스 체계는 프로그래밍 하는데 자주 사용하므로 시간나시면 배우는 것을 추천드립니다.

 

 

 

다음 포스팅에서는 컴포넌트에서 꼭 활용해야 할 props와 state에 대해서 알아보겠습니다.