REACT Component에 대한 정리

 

REACT Component 정리

 

[기본셋팅]

src내에 문서 또는 파일을 만든다.

파일 이름은 대문자로 하고 파일 내에서 rsc를 작성하고 tab을 누르면 함수형 컴포넌트를 만들수 있다.

app.js에서 위의 파일을 import하고 return안 프레그먼트에 해당 컴포넌트를 작성한다.

 

 

app.js

//////////////////app.js///////////////////////
import React, { Component } from 'react';
//새로 만든 컴포넌트를 import
import ComponentsTest1 from './ComponentsTest1';


const app = () => {
  return ( 
  	//<fragment>작성하고 내부에 만든 컴포넌트 작성
      <>
          <ComponentsTest1></ComponentsTest1>
      </>
   );
}
 
export default app;

 

 

 

 

 

Component를 작성하는 방법 1

ComponentsTest1.js

import React from 'react';

//props로 인수 전달
const ComponentsTest1 = props => {
    return (
        <div>
            저의 이름은 <b>{props.name}</b>입니다. <br/>
            저의 children은 <b>{props.children}</b> <br/>
            제가 좋아하는 숫자는 <b>{props.number}</b>입니다.
        </div>
    );
};

//객체 형식으로 만든다.
ComponentsTest1.defaultProps = {
    name : 'a',
    number : 6
};

export default ComponentsTest1;

defaultProps는 아무것도 지정하지 않았을 때 보여지는 기본 값을 나타낼 수 있다.

children은 app.js 내에서

<componentsTest1>       </componentsTest1>

자식요소에 작성되는 내용에 해당된다.

<>
      <ComponentsTest1>child</ComponentsTest1>
</>

이렇게 자식요소 값을 넣어주면 props.children은 child값을 반영한다.

 

app.js에서 직접 다른 값으로 바꿔 줄 수도 있다.

<>
     <ComponentsTest1 name="b" number="99">child</ComponentsTest1>
</>

기존의 값이 덮어씌워진다.

 

 

 

 

 

 

 

Component를 작성하는 방법 2-1

ComponentsTest1.js

비구조 할당으로 작성하는 컴포넌트 함수

import React from 'react';

const ComponentsTest1 = props => {
    const {name, children, number} = props;
    return (
        <div>
            저의 이름은 <b>{name}</b>입니다. <br/>
            저의 children은 <b>{children}</b> <br/>
            제가 좋아하는 숫자는 <b>{number}</b>입니다.
        </div>
    );
};

export default ComponentsTest1;

props에 있는 name, children, number의 값을 가져온다.

지금은 인수의 값이지만 함수나 변수로 인자의 값이 들어간다면 해당하는 값의 name, children, number의 요소를 가져오게 될 것 이다.

 

app.js

import React, { Component } from 'react';
import ComponentsTest1 from './ComponentsTest1';


const app = () => {
  return (
      <>
          <ComponentsTest1 name="c" number="50">child</ComponentsTest1>
      </>
   );
}
 
export default app;

 

 

 

 

 

Component를 작성하는 방법 2-2

ComponentsTest1.js

위의 방식을 더 간단하게 작성하는 방법

import React from 'react';

const ComponentsTest1 = ({name, children, number}) => {
    return (
        <div>
            저의 이름은 <b>{name}</b>입니다. <br/>
            저의 children은 <b>{children}</b> <br/>
            제가 좋아하는 숫자는 <b>{number}</b>입니다.
        </div>
    );
};

export default ComponentsTest1;

화살표 함수의 인수 자리에 인자 값을 넣어준다.

데이터 전달하는 부분(인자 값)은 {      }에 작성하면 된다.

2-1, 2-2 동일한 값이 나온다.