[React] React 컴포넌트/Props

컴포넌트 생성 방법

import React from 'react'

function App(){
	return( 
    	<h1>Hello</h1>
 		);
};
    
export default App;

1. 함수형 컴포넌트 App을 생성한다.
2. JSX문법의 앨리먼트를 리턴한다.
3. App 컴포넌트를 다른 컴포넌트에서 쓸 수 있도록 export 한다.

이와 같은 결과를 얻을 수 있다.

export 한 컴포넌트 사용하기

import React from 'react'

function SayHello(){
	return(
    	<h1>Hello</h1>
        );
};

export default SayHello;

import React from 'react'
import SayHello from './SayHello'

function App(){
	return(
    <SayHello/>
    );
};

export default App;

export한 SayHello 컴포넌트를 위와 같이 App 컴포넌트에서 import 해서 쓸 수 있다.

Props 전달

Props는 properties의 약자로, 컴포넌트끼리 값을 주고받을 수 있도록 해준다.

import React from 'react'

function SayHello(prop){
	return(
    	<h1>Hello I`m {prop.name}</h1>
        );
};

export default SayHello;

import React from 'react'
import SayHello from './SayHello'

function App(){
	return(
    <SayHello name='Choi'/>
    );
};

export default App;

• prop은 객체 형식으로 전달된다.
  • 위의 코드에서는 {name : 'Choi'}로 전달된 것이다.
• prop전달은 위의 코드처럼 해주면 된다.

name이 전달되어 다음과 같은 결과를 볼 수 있다.

여러 개의 props, 비구조화 할당

import React from 'react'
import SayHello from './SayHello'

function App(){
	return(
    <SayHello name='Choi' color='red'/>
    );
};

export default App;

import React from 'react'

function SayHello(props){
  console.log(props);
  const {name,color}=props;
	return(
    	<h1 style={{color : color}}>Hello I`m {name}</h1>
        );
};

export default SayHello;

1. App 컴포넌트에서 color와 name props를 전달해줬다.
앞서 말한 대로 props는 객체 형식으로 전달된다.

전달받은 props를 콘솔에 찍은 결과

2. 구조 분해 할당을 이용해 name과 color 변수에 바로 전달받은 값을 담아준다.

여러 개의 컴포넌트 렌더링

import React from 'react'
import SayHello from './SayHello'

function App(){
	return(
    <div>
    <SayHello name='Choi' color='red'/>
    <SayHello name='Park' color='blue'/>
    <SayHello name='Kim' color='purple'/>
    </div>
    );
};

export default App;

import React from 'react'

function SayHello(props){
  console.log(props);
  const {name,color}=props;
	return(
    	<h1 style={{color : color}}>Hello I`m {name}</h1>
        );
};

export default SayHello;

위의 App 컴포넌트에서와 같이 같은 컴포넌트를 여러 번 사용할 수 있다.

위의 코딩 결과