React 컴포넌트 (Day2)

컴포넌트

영어로는 요소, 부품이란 뜻
기능을 단위별로 캡슐화하는 리액트의 기본 단위

구성요소

1. 프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
2. state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
3. 컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

프로퍼티

사용법 : export하는 jsx 파일에서 필요한 프로퍼티 값들을 작성하고 import하는 jsx파일에서 해당 값들을 this.props를 통해 처리한다.

예시

1) App.jsx

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import ChildComponent from "./03/ChildComponent";


class App extends React.Component {
  render() {
    return (
        <div>
         <ChildComponent
         numValue={1}
         arrayValue={[1,2,3]}/>
        </div>
    );
      }
}
export default App;

2) ChildComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
    render(){
    return (
      <div>
        <span>숫자값: {this.props.numValue}</span><br/>
        <span>Array: {this.props.arrayValue}</span>
      </div>
    );
  }
}

ChildComponent.propTypes = {
  numValue: PropTypes.number,
  arrayValue: PropTypes.arrayOf(PropTypes.number),
 }

export default ChildComponent;

App.jsx에서 export한 내용을 Childcomponent.jsx에서 받아 해당 내용을 출력을 진행한다.

결과

숫자값: 1
Array: 123

this.props란?

현재 코드의 this.props를 찾으면 {numValue: 1, arrayValue: Array(3)} 이러한 내용이 들어있다.

즉, this.props는 해당 컴포넌트의 프로퍼티로 들어온 값을 나타낸다.

위의 코드를 좀 더 정리해보기

1) App.jsx

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import ChildComponent from "./03/ChildComponent";


class App extends React.Component {
  render() {
        const num = 1;
        const arrayValue = [1,2,3];
    return (
        <div>
         <ChildComponent
         numValue={num}
         arrayValue={arrayValue}/>
        </div>
    );
      }
}
export default App;

해당 {} 부분에 render(){내용}에서 변수를 선언하여 그 변수를 대입 할 수있다.

2) ChildComponent.jsx

import React from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
    render(){
        const {
            numValue,arrayValue
        }=this.props;
    return (
      <div>
        <span>숫자값: {numValue}</span><br/>
        <span>Array: {arrayValue}</span>
      </div>
    );
  }
}

ChildComponent.propTypes = {
  numValue: PropTypes.number,
  arrayValue: PropTypes.arrayOf(PropTypes.number),
 }

export default ChildComponent;

this.props는 객체를 통한 받아온 프로퍼티 값이므로 이를 구조분해할당을 이용하여 해당 맞는 값을 찾아 넣어준다. ( 위에처럼 출력때마다 this.props를 안써도 되는 장점이있다.)

const {
            numValue,arrayValue
        }=this.props;(= {numValue: 1, arrayValue: Array(3)})

따라서 ChildComponent.jsx에서의 선언한 numValue라는 변수에 1이라는 값이 arrayValue라는 배열변수에 [1,2,3]이 선언 및 할당 된다.

주의 할 점

리액트에서 문자열 외의 값은 따옴표 대신 중괄호를 사용해야 한다.

1) App.jsx

	<div>
         <ChildComponent
         numValue={num}
         arrayValue={arrayValue}/>
        </div>

2) ChildComponent.jsx

	<div>
        <span>숫자값: {numValue}</span><br/>
        <span>Array: {arrayValue}</span>
     	</div>

문자열의 예시

return (
<PropComponent
name = "두잇 리액트"
/>
);

jsx에서 render(){ } 묶은 부분은 js부분이고 그 안의 return()로 묶인 부분은 jsx부분이다.

해당내용에서 각 파일의 export 부분은 index.js에서 App.jsx 내용을 가져가고 App.jsx에서는 ChildComponent 부분을 import하기 때문에 필요하다.