컴포넌트 활용하기(props)

모듈 생성 및 import/export

 먼저 컴포넌트를 생성해 이를 내보내고(export), 불러오는(import) 작업을 수행해 보겠습니다.

 

저는 일단 기본 리액트 프로젝트 src 폴더에 > MyComponent라는 폴더를 생성했습니다 그리고 그 내부 동일 명칭의 js 파일을 생성해보았습니다.

const style = {
    color : 'red', 
}
const MyComponent = () => {
    return <h1 style={style}>new component</h1>
}

export default MyComponent;

 해당 JS 의 내용은 위와 같은데 위 내용에서는 가장 아래 줄 export default MyComponent를 유의깊게 확인해 보아야 합니다. 이 코든는 해당 파일을 다른 코드에서 import 할 때 MyComponent 클래스를 불러오도록 설정이 됩니다 그렇다면 기본 App.js 에서 MyComponent 를 import 해보겠습니다.

import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ 
import './App.css';
import MyComponent from './MyComponent/MyComponent';

  const App = () => {
    return <MyComponent></MyComponent>
  }

export default App;

 이렇게 다른 파일에서 import를 통해 컴포넌트를 불러오는 것이 가능해지게 됩니다.

props

 props 라는 말이 생소할 수 있습니다. 그렇지만 props는 properties의 줄임말로, 일반적인 다른 언어나 프레임워크의 property와 같이  컴포넌트 속성을 설정할 때 사용하는 요소입니다.

 1. JSX 내부 props 렌더링

const style = {
    color : 'red', 
}
const MyComponent = props => {
    return <h1 style={style}>{props.name} 입니다</h1>
}
export default MyComponent;

  먼저 코드를 통해 알아보면  props는 위와 같이 표현이 됩니다 먼저 컴포넌트에 name 이라는 하나의 속성을 지정했습니다 이를 

const style = {
    color : 'red', 
}
const MyComponent = props => {
    return <h1 style={style}>{props.name} 입니다</h1>
}
export default MyComponent;

import한 App.js 에서 이런식으로 인용해 준다면 

위와 같은 결과를 브라우저에 뿌려주게 됩니다. 또한 props는 이러한 속성의 default 값을 지정하는 것이 가능합니다.

const style = {
    color : 'red', 
}
const MyComponent = props => {
    return <h1 style={style}>{props.name} 입니다</h1>
}

MyComponent.defaultProps = {
    name : "default"
}


export default MyComponent;

 

2.children

 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 존재합니다. 이것이 바로 children입니다.  App.js를 다음과 같이 수정해 보겠습니다

import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ 
import './App.css';
import MyComponent from './MyComponent/MyComponent_children';

  const App = () => {
    return <MyComponent>리액트</MyComponent>
  }

export default App;

그리고 MyComponent 폴더안에 MyComponent_children 이라는 js 파일을 생성할 것인데 아래와 같이 js 파일을 생성 합니다.

import React from 'react';

const MyComponent_children = props => {
    return (
        <div>
            my name is {props.name} <br/>
            children name is {props.children}

        </div>
    );
};

MyComponent_children.defaultProps ={
    name  :"defalt"
};

export default MyComponent_children;

위와 같이 작성한다면 브라우저에서는

컴포넌트 태그 사이에 내용을 렌더링 해주게 됩니다.

3. props 내부 값 추출

import React from 'react';

const InnerProps = ({name,children}) => {
    return (
        <div>
             my name is {name} <br/>
            children name is {children}
        </div>
    );
};

InnerProps.defaultProps = {
    name : 'default'    
}

export default InnerProps;

 위 코드는 2번 코드와 동일한 결과를 반환합니다 그렇지만 props안에 속성을 주입해주는 방법이나 name, children 이라는 키워들 props로 mapping 해주는 방식에 비해 가장 간단한 방법을 제공합니다. 이 방식을 가장 많이 쓰고 가장 편리한 방법이 될 것입니다.

4. protoTypes 지정

import React from 'react';

const InnerProps = ({name,children}) => {
    return (
        <div>
             my name is {name} <br/>
            children name is {children}
        </div>
    );
};

InnerProps.defaultProps = {
    name : 'default'    
}

InnerProps.propTypes = {
    name : PropTypes.string
};

export default InnerProps;

동일 코드에 propTypes 가 추가되었습니다 이는 name을 string 타입으로만 받아들이게 됩니다.