[ REACT ] 컴포넌트, props 사용하기

컴포넌트란?

컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다.

 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

 

함수형 컴포넌트와 클래스형 컴포넌트의 차이

1. 함수형 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

리액트 공식문서에서 컴포넌트 새로 작성시에는 함수형 + Hooks의 조함으로 만드는것을 추천한다고 한다.

함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고, 메모리도 덜 사용한다고 한다. (엄청 큰차이는 아니라고)

이전에는 state와 라이프사이클 API의 사용이 불가능했으나, Hooks를 이용하여 사용이 가능하다고 한다.

 

 

2. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

클래스형 컴포넌트에서는 render함수가 꼭 있어야 한다.

render함수 안에서 렌더링하고 싶은 JSX 를 반환해준다.

 

 

 

props란?

props란 컴포넌트끼리 값을 전달하는 수단이다.

props는 읽기 전용이다.

입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환해야한다.

 

그래서 값 변경시에 React 컴포넌트는 state를 통해 위 규칙을 위반하지 않고
사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경한다 ( 다음에 알아보자 )

 

아래에서 props를 사용하는 예제들을 확인해보자!

 

1. props를 사용한 렌더링

 

1. App.js에 name이라는 props를 "byeol"이라는 값으로 넘겨주고,

2. GetName.js에서 1에서 정의한 name을 props.name으로 사용해서

화면에 "Hello, byeol"이 출력되도록 한다.

 

App.js

import React from 'react';
import GetName from "../src/features/counter/GetName.js"

function App() {
  return (
    <div className="App">
      <Reset />
      <GetName name="byeol" />
    </div>
  );
}

export default App;

 

GetName.js

import React from 'react'

function GetName(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  

export default GetName;

또는 GetName.js + 비구조화 할당 ( 객체에서 값을 추출하는 문법 )

비구조화할당으로 간결하게 작성 가능하다. 결과는 똑같이 "Hello, byeol"이 출력

import React from 'react'

function GetName({props}) {
	// props.name을 비구조화 할당으로 name으로 줄였음!
    return <h1>Hello, {name}</h1>;
  }
  

export default GetName;

결과

 

 

2. defaultProps 로 기본값 설정하기

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정한다.

위에서 작성한 App.js에서 name만 빼서 props 기본값 설정 테스트를 해보자

 

 

App.js

import React from 'react';
import GetName from "../src/features/counter/GetName.js"

function App() {
  return (
    <div className="App">
      <Reset />
      <GetName />
    </div>
  );
}

export default App;

 

GetName.js

import React from 'react'

function GetName(props) {
    return <h1>Hello, {props.name}</h1>;
  }

GetName.defaultProps = {
	name:'임시이름'
}  

export default GetName;

결과

 

 

props.children로 태그 사이의 값 가져오기

태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 사용한다.

 

App.js

import React from 'react';
import GetName from "../src/features/counter/GetName.js"
import Wrap from "../src/features/counter/Wrap.js"


function App() {
  return (
    <div className="App">
      <Wrap>
      	{/* Wrap의 children은 GetName이 된다. */}
      	<GetName />
      <Wrap>
    </div>
  );
}

export default App;

 

GetName.js

import React from 'react'

function GetName(props) {
	return <h1>Hello, {props.name}</h1>;
}

GetName.defaultProps = {
	name:'children'
}  

export default GetName;

 

Wrap.js

import React from 'react'

function Wrap({children}) {
    return(
      <>
      	{children}
      </>
    )
  }

export default Wrap;

 

Wrap.js에 아래같이 Fragment만 사용하면 아무것도 렌더링이 되지않으나,

위처럼 사이에 {children} 을 넣어주면 내부의 "Hello, children"이 화면에 나타난다.

 

결과

---

✔️ 참고

https://react.vlpt.us/basic/05-props.html

https://ko.reactjs.org/docs/components-and-props.html