보일러 플레이트(Boiler Plate) 이해하기

요약

• BoilerPlate 코드란 모든 코드를 작성하기 위해 항상 필요한 부분을 의미한다. 
• BoilerPlate는 다음 4가지로 구성되어 있다.
  • Import : 필요한 코드를 불러들이는 부분
  • Component : 현 페이지를 구현하는 코드
  • StyleSheet : 페이지의 객체를 꾸미기 위한 style
  • Export : 현 Javascript 코드를 타 Javascript에서 접근하기 위한 부분

 

용어 정의

코딩을 배우는 방법이 여러 가지 있겠지만, 그중 가장 쉽고 빠르게 결과를 만들 수 있는 방법은 바로 모방일 것이다.

 

간혹 전문서적을 보며 공부하시는 분들도 봤지만, 대부분의 경우는 블로그, 유튜브, 스펙 문서 등을 참고하여 '무작정' 짜다 보면 많은 부분을 이해하지 못하더라도 내가 원하는 대로 동작하게 만드는 것은 쉽고, 그렇게 하다 보면 언젠가는 궁금증을 이기지 못해 결국 검색해서 이해하는 순간이 오기 때문에 필자도 이런 방식을 선호한다.

 

'묻지도 따지지도 않고 따라 적는 코드'를 우리는 보일러 플레이트(Boiler Plate) 코드라고 한다. 이 용어는 미국 신문 업계 초창기에 매일 바뀌지 않고 동일한 내용(신문의 제목, 형태 등 변하지 않는 부분)을 효율적으로 출력하기 위해 '박아 놓고 똑같이 사용하기 위해' 작성된 철판 모형을 의미한다.

 

이런 용어가 프로그래밍으로 넘어와서 '별 수정 없이 반복적으로 사용되는 코드'를 보일러 플레이트라고 한다.

 

묻지도 따지지도 말고 그냥 복사한 다음, 필요 부분만 수정하면 된다는 말이다.

 

React-Native 코딩을 하게 되면 다음 코드는 수십 번에서 수백 번도 작성하게 될 것이다. 

 

코드

// Import
import React from 'react';
import { Text, StyleSheet, View } from 'react-native';

// Component
const Home = () => {
  const name = 'Coding Grandpa';

  return (
    <View>
      <Text>Welcome to the home page!</Text>
      <Text>My name is {name}</Text>
    </View>
  )
};

// StyleSheet
const styles = StyleSheet.create({});

// Export
export default Home

전체 코드는 위와 같다. 주석에 적은 대로 4가지로 구분이 되는데, 이를 하나씩 나눠서 이해해보자.

 

 

1. Import

// Import
import React from 'react';
import { Text, StyleSheet, View } from 'react-native';

• Import는 말 그대로 다른 코드를 수입 혹은 가져오는 행위이다. 즉, 현 js 파일에 작성하지 않은 다른 코드를 사용하기 위해서 다른 코드를 가져오라는 명령어이다.
• 이 중에는 제공되는 library를 가져와서 사용할 수도 있고, 같은 프로젝트 내 다른 파일로 작성한 나의 코드를 가져올 수도 있다. 

 

 

2. Component

// Component
const Home = () => {
  const name = 'Coding Grandpa';

  return (
    <View>
      <Text>Welcome to the home page!</Text>
      <Text>My name is {name}</Text>
    </View>
  )
};

• Component란 구현하고자 하는 객체들의 집합을 의미한다
• 한 화면에 표현하고자 하는 객체들의 집합이자, 해당 Javascript의 핵심적인 코드이다.
• 여기서 Component는 항상 JSX 객체를 하나 반환하게 되어있다.
• 단순한 Text를 반환하기도 하고, 여러 가지를 한 화면에 구성하기 위해 <View>를 형성한 뒤에 그를 반환하도록 작성할 수도 있다.

 

 

3. StyleSheet

// StyleSheet
const styles = StyleSheet.create({});

• StyleSheet은 Component의 각 객체 (Text, View, Button 등)에 입혀주고 싶은 design요소를 정의하는 곳이다.
• 여기에 정의하면, Component부에서 각 객체별로 적용하여 표현할 수 있다.

 

 

4. Export

// Export
export default Home

• C와 Java로 시작한 나에게는 참 생소한 부분이다.
• 하지만 React-native를 하기 위해선 export를 명시적으로 적어줘서, 다른 코드에서도 해당 객체를 접근할 수 있도록 허락해줘야 한다.

 

 

정리

Import, Component, StyleSheet, Export (ICSE), 이 4가지는 항상 들어간다. 

 

예제 코드에서는 StyleSheet도 빈 깡통으로 만들어 두었지만, 이런 식으로 늘 4가지를 만들어서 사용해야 하기 때문에 우리는 이를 보일러 플레이트라고 한다.

 

처음 몇 번은 이해를 위해서 적어보는 것도 의미가 있지만, 계속 적다 보면 '이거 그냥 Visual Code가 자동 생성해주면 안 되나?' 하는 의문이 든다. 기본적인 의미를 이해했다면 복붙을 잘 활용해도 좋을 것 같다.