리액트의 props

props(properties): 어떠한 값을 컴포넌트에게 전달해주어야 할 경우 사용

- 컴포넌트의 속성을 설정할 때 사용하는 요소

- 읽기 전용

- 컴포넌트 자체 props를 수정하면 안됨

- 모든 React컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야함

- 수정되는 것은 state

 

1. 컴포넌트에게 전달되는 props는 파라미터를 통해 조회 가능, props는 객체 형태로 전달됨

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

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

export default App;

import React from "react";

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>;
}

export default Hello;

 

2. 함수의 파라미터에서 비구조화 할당(구조 분해) 문법을 사용하면 조금 더 코드를 간결하게 작성 가능

import React from "react";

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

export default Hello;

3. defaultProps: 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값 설정하고 싶을 경우 사용

import React from "react";

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

Hello.defaultProps = {
  name: "이름없음",
};

export default Hello;

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

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

export default App;

defaultProps사용 예시 결과

4. props.children: 컴포넌트 태그 사이에 넣은 값 조회하고 싶을 경우 사용

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;

import React from "react";

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