[리액트] Props

 

🎀 Props

• properties의 줄임말
• props는 읽기 전용이다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
  • 아래와 같은 함수들은 순수 함수라고 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과 값을 반환하기 때문이다.

function sum(a, b) {
  return a + b;
}

• • 반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.

function withdraw(account, amount) {
  account.total -= amount;
}

• 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.

 

 

 

 

---

 

 

props

어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용

 

 

 

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

 

Hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

👇 비구조화 할당(혹은 구조 분해)

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 

 

---

 

 

defaultProps

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

 

Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

 

 

---

 

 

props.children

컴포넌트 태그 사이에 넣은 값을 조회화고 싶을 땐, props.children을 조회하면 된다.

 

 

App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

 

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

 

 

 

 

 

 

 

---

참고 :

 

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

Components와 Props – React

 

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

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook

https://en.wikipedia.org/wiki/Pure_function

Pure function - Wikipedia

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

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook