(React) 리액트 props, 컴포넌트에게 값 전달하기

---

(React) 리액트 props, 컴포넌트에게 값 전달하기

---

*이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다.

현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :)

 

---

1. App에서 Props값 지정

*App컴포넌트에서 값을 지정하는 경우입니다.

 

App.js

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

const App = () => {
  return <Component name="코짜문"/>;
};

export default App;

 

Component.js

import React from "react";

const Component = (props) => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

export default Component;

 

---

2. 컴포넌트에서 Props 기본값 설졍

*App컴포넌트에서 Props값을 따로 지정하지 않았을때 기본값을 보여줍니다.

 

App.js

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

const App = () => {
  return <Component />;
};

export default App;

 

Component.js

import React from "react";

const Component = (props) => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

Component.defaultProps = {
  name: "코드짜는 문과녀",
};
export default Component;

---

3. 컴포넌트에서 Props 기본값 설졍

*App컴포넌트 태그사이 값 출력하기

 

App.js

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

const App = () => {
  return <Component>"나를 출력해줘~"</Component>;
};

export default App;

 

Component.js

import React from 'react';

const Component = (props) => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다.
      <br />
      App 컴포넌트의 태그사이 값은{props.children}입니다.
    </div>
  );
};

Component.defaultProps = {
  name: '코드짜는 문과녀',
};
export default Component;

* Component.js에서 {props.children}을 안쓰면

App.js의 태그사이값 "나를 출력해줘~" 가 화면에 출력되지 않습니다.

---

4. 비구조화 할당 문법으로 proprs 내부 값 추출하기

*비구조화 할당 문법으로 props.name , props.children을

name, children으로 쓰기

 

App.js

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

const App = () => {
  return <Component>"나를 출력해줘~"</Component>;
};

export default App;

 

Component.js

import React from 'react';

const Component = (props) => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다.
      <br />
      App 컴포넌트의 태그사이 값은{children}입니다.
    </div>
  );
};

Component.defaultProps = {
  name: '코드짜는 문과녀',
};
export default Component;

---

5. PropTypes를 통한 props 검증

* PropTypes 와 defaultProps 사용이유 :

필수 사항이 아니므로 꼭 사용할 필요는 없지만, propsType을 사용하면,

해당 컴포넌트에 어떤 props가 필요한지 쉽게 알 수 있습니다. 

 

App.js

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

const App = () => {
  return <Component>"나를 출력해줘~"</Component>;
};

export default App;

 

Component.js

import React from 'react';
import PropTypes from 'prop-types';

const Component = ({ name, age, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다.
      <br />
      나이는 {age}입니다.
      <br/>
      App 컴포넌트의 태그사이 값은{children}입니다.
    </div>
  );
};

Component.defaultProps = {
  name: '코드짜는 문과녀',
  age: 25,
};

Component.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
};
export default Component;

*name은 string타입으로 , age는 number타입으로 안쓰면 콘솔창에 경고가 뜸.

*name은 propTypes뒤에 isRequired가 붙었으므로, 필수로 값이 있어야됨,

값이 없을경우 콘솔창에 경고가 뜸.

*age뒤에는 isRequired가 없으므로, 값이 없어도 경고가 안뜸.