React에 Component 만들기

안녕하세요. AlbertKo입니다.

오늘은 Component 만드는 방법을 알아보도록 하겠습니다.

먼저, Component의 디렉토리는 보통 './src/components/YourComponentFile.tsx' 이런 식의 위치에 자리잡습니다.

그러면 먼저 파일을 만들도록 합시다.

저는 first.tsx 라는 이름의 파일을 만들었습니다.

그런 다음, react를 import 해줍시다.

import * as React from 'react';

그런 다음에 저는 material-ui 라이브러리도 추가하겠습니다.

후에 UI 라이브러리 소개 및 사용 강의를 작성할 때 자세하게 설명해드리겠습니다 ㅎㅎ

그 후 react로 부터 component class를 상속 받아서 일단 코드를 작성해봤습니다.

import * as React from 'react';

import Button from '@material-ui/core/Button';

class First extends React.Component<{}, {}>{

public render(){

return (

<div className="First">

<Button variant="contained" color="primary">

Hello World

</Button>

</div>

);

}

}

export default First;

이런 식으로 작성을 했는데요. 무작정 따라하셔도 되지만 원하시는데로 간단하게 짜보는걸 추천합니다!

Component를 만드는 방법은 대표적으로 세가지가 있습니다.

아래에서 하나하나 설명해 드리도록 하겠습니다.

Component란??

Component란 독립적인 소프트웨어 모듈입니다.

이게 무슨 뜻이냐면, 웹을 구성을 했는데 특정 이미지와 이미지의 제목과 설명을 보여주는 부분이 있다고합시다,

근데 이미지가 한 개가 아니라 N개라고 할 때, 위의 구성을 또 하나 하나 만들어주면 굉장히 비효율적이겠죠??

이 것을 한 모듈로 만들어서 재사용성을 높여줍니다.

"뭔 개소리인지 이해가 안됩니다."

혹시 이해가 안되시는 분들을 위해서 다른 의미로 설명을 하자면,

붕어빵을 굽는데 붕어빵을 일일이 손을로 빚어서 만든다고 생각을하면 굉장히 불편할 것 같잖아요???

근데 붕어빵을 '붕어빵 모양틀'에 구우면은 반죽의 색깔이나 속이 달라도 붕어빵의 형태로 나온다는 것입니다.

이게 머리에서는 정리가 되는데 말로 쓸려고 하니깐 좀 힘드네요ㅜㅜ;;

일반적인 Component

class First extends React.Component<{}, {}>{

public render(){

console.log("");

return (

<div className="First">

<Button variant="contained" color="primary">

Hello World

</Button>

<FuncCompo>

This is Material Button

</FuncCompo>

</div>

);

}

}

이것이 일반적인 컴포넌트의 형식입니다.

클래스의 형식에 React.Component를 상속한 것입니다.

제너릭을 통해서 Props와 State를 정의할 수 있습니다.

Props

• 오직 외부에서 할당 가능하며, 내부에서는 변경 불가능합니다.
• 즉, 부모 컴포넌트로 부터 할당받는 Properties 입니다.
• 외부에서 Props에 값이 전달시 Update하여 render()이 다시 호출됩니다.

State

• 컴포넌트 내부에서 사용됩니다.
• 초기화는 생성자 안에서 해줍니다 
• State Update는 setState() method를 이용하여 합니다. 후에 render()이 다시 호출됩니다.

interface IFirstProps {

button : string,

}

interface IFirstState {

status : boolean,

}

class First extends React.Component<IFirstProps, IFirstState>{

constructor(props : IFirstProps){

super(props);

}

public render(){

return (

<div className="First">

<Button variant="contained" color="primary">

{this.props.button}

</Button>

</div>

);

}

}

Props를 쓰려면 다음과 같이 생성자를 통해 작업해줘야합니다.

상속을 받는 것이기 때문에 Construct(생성자)에 super에 props를 매개변수로 넣어줍니다.

부모 컴포넌트에서 불러오는 것은

<First button="Marco" />

위처럼 props에 button porperty에 값을 전달해 줄 수 있습니다.

그리고 다시 컴포넌트 코드에서 React.Component를 상속하는 부분을 보시면 제너릭 쪽에 위에 선언된 인터페이스들을 넣어준게 보일겁니다.

React.Component<P, S> 형태로 해줘야하기 때문에 Interface로 정리해줬습니다.

만약 Interface를 사용하지 않고 쓴다면

 

class First extends React.Component<{button : string;}, {status : boolean}>{

constructor(props : {button : string;}){

super(props);

}

public render(){

return (

<div className="First">

<Button variant="contained" color="primary">

{this.props.button}

</Button>

</div>

);

}

}

이런식으로 사용을 했겠지요???

이어서 State까지 초기화를 했다면

interface IFirstProps {

button : string,

}

interface IFirstState {

status : boolean,

}

class First extends React.Component<IFirstProps, IFirstState>{

constructor(props : IFirstProps){

super(props);

this.state = { status : true };

}

public render(){

return (

<div className="First">

<Button variant="contained" color="primary">

{this.props.button}

</Button>

</div>

);

}

}

이런식으로 state를 초기화를 시켜주면 됩니다.

아, Props에는 기본적으로 children이라는 프로퍼티가 존재합니다.

children의 설명은 밑에 statelessComponent에서 설명하도록 하겠습니다.

생성자 안에는 setState를 사용하면 안됩니다.

생성자 안에서 setState 메서드를 사용하여도 state의 값이 null이기 때문에 초기화가 되지않습니다.

그렇다면 setState는 어떤식으로 써야할까요??

class First extends React.Component<IFirstProps, IFirstState>{

constructor(props : IFirstProps){

super(props);

this.state = { status : false };

}

public clickHandler = () => {

console.log("Hello click");

this.setState((preState)=>{

return { status : !preState.status };

})

}

public render(){

return (

<div className="First">

<Button onClick={this.clickHandler} variant="contained" color="primary">

{this.props.button}

</Button>

{this.state.status && <h1>State!!</h1>}

</div>

);

}

}

우선 Button 부분을 한 번 봐봅시다.

onClick 은 이벤트 부분입니다. 하고 함수가 하나 더 생겨있죠??

clickHandler라는 함수를 만들어줘서 버튼이 클릭할 때 마다 해당 함수가 실행되도록 했습니다.

그리고 clickHandler 안에는 setState가 있습니다.

setState()

(prevState, props) => { stateChange }

(prevState) => { stateChange }

(stateChange, [, callback])

이렇게 세가지 방법으로 사용할 수 있습니다.

설명을 하자면 첫번째 방법 같은 경우는 매개변수를 통해 '이전 스테이트'와 'Props'의 값을 전달해 줍니다.

두번째 같은 경우는 첫번째와 같으나 porps가 매개 변수에서 빠졌고요,

세번째 같은 경우는 그냥 새로운 state 값을 기존 값에 merge 하는 겁니다. 예를 들어서, 쇼핑카트에 물건의 개수를 조정하는 부분에서 쓸 수 있습니다.

PureComponent

PureComponent는 일반 Component와 매우 비슷합니다.

다만 다른 점이 무엇이냐면, React의 라이프 사이클에서 일반 Component는 shouldComponentUpdate() method를 시행하지 않지만,

PureComponent는 이를 시행한다는 것입니다.

LifeCycle 부분까지 이글에서 설명을하게 된다면 글이 정말 길어져 지루해질 것 같아서 LifeCycle 부분은 다음 글에서 설명해 드리도록 하겠습니다 ㅎㅎ

StatelessComponent

StatelessComponent란 말 그대로 State가 없는 컴포넌트입니다.

홈페이지에 설명을 보면 Component를 함수혹은 클래스로 정의할 수 있다고 나옵니다.

위에 두가지 같은 경우가 '클래스로 정의한 컴포넌트'가 되는 것이고

지금 부터 설명할 컴포넌트의 경우가 '함수로 정의한 컴포넌트'가 되겠습니다.

한 번 어떻게 생겼는지 보고 갈까요???

const FuncCompo : React.SFC<{}> = (props) => {

return (

<h1>

{props.children}

</h1>

)

}

이게 바로 StatelessComponent입니다.

React.SFC나 React.StatelessComponent의 형식으로 선언해줍니다.

SFC 역시 제너릭에 인터페이스로 프롭스의 형식을 정의해줄 수 있습니다.

 

const FuncCompo : React.SFC<IFirstProps> = (props) => {

return (

<h1>

{props.children}

</h1>

)

}

자, 그리고 아까 말한 porps에 children 프로퍼티입니다.

children이란 컴포넌트를 사용할 때 컴포넌트의 태그 내에 들어가는 내용들을 props.children 으로 불러 올 수 있습니다.

또, stateless 같은 경우는 re-rendering 하지 않습니다.

<전체 코드>

import * as React from 'react';

import Button from '@material-ui/core/Button';

interface IFirstProps {

button : string,

}

interface IFirstState {

status : boolean,

}

class First extends React.Component<IFirstProps, IFirstState>{

constructor(props : IFirstProps){

super(props);

this.state = { status : false };

}

public clickHandler = () => {

console.log("Hello click");

this.setState((preState, props)=>{

console.log(props.button);

return { status : !preState.status };

})

}

public render(){

return (

<div className="First">

<Button onClick={this.clickHandler} variant="contained" color="primary">

{this.props.button}

</Button>

{this.state.status && <h1>State!!</h1>}

{this.state.status && <FuncCompo button="">

This is Material Button

</FuncCompo>}

</div>

);

}

}

const FuncCompo : React.SFC<IFirstProps> = (props) => {

return (

<h1>

{props.children}

</h1>

)

}

export default First;

여태까지 설명한 내용들이 전부 있는 First Component 입니다.

사실 컴포넌트 부분이 설명할 부분이 너무 많기도하고... 가장 중요한 부분 중 하나이기 때문에

저의 부족한 설명력으로 많은 내용들을 정리해야 하다보니 으아ㅏㅏ하며 미루고 미루다가 이제야 글 작성을 완료했네요 ㅜㅜ

실행 결과입니다.

MARCO 버튼을 누르면 state에 status 프로퍼티가 토글되며 밑에 글이 보였다 안보였다 합니다.

이상 React Component 강의 글이였습니다!

다음 글은 이번 글에서 설명 못한 LifeCycle에 대해 설명하도록 하겠습니다 ㅎㅎ

부족한 글 읽어주셔서 감사합니다.

궁금하신 점 혹은 잘못되거나 고쳤으면 하는 점 피드백 주시면 감사하겠습니다.