๐Ÿ”ซ React_02 props

qhflrnfl4324ยท2022๋…„ 1์›” 4์ผ
1

React

๋ชฉ๋ก ๋ณด๊ธฐ
2/5
post-thumbnail

๐ŸŽฎ props๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ๊ฐ’ ์ „๋‹ฌํ•˜๊ธฐ

๐ŸŽฒ props์˜ ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•

  • App ์ปดํฌ๋„ŒํŠธ์—์„œ Hello ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉ
  • name์ด๋ผ๋Š” ๊ฐ’์„ ์ „๋‹ฌ
// App.js
import React from "react";
import Hello from "./Hello";

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

export default App;
  • Hello ์ปดํฌ๋„ŒํŠธ์—์„œ name๊ฐ’์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ,
// Hello.js
import React from "react";

function Hello(props) {
  return <div>Hey, {props.name}</div>;
}

export default Hello;
  • ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” props๋Š” ํ”ผ๋ผ๋ฏธํ„ฐ๋ฅผ ํ†ตํ•ด ์กฐํšŒ
  • props๋Š” ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ „๋‹ฌ
    • name ๊ฐ’์„ ์กฐํšŒํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด props.name์œผ๋กœ ์กฐํšŒ

๐ŸŽฒ ์—ฌ๋Ÿฌ ๊ฐœ์˜ props, ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น

  • Hello ์ปดํฌ๋„ŒํŠธ์— color๋ผ๋Š” ๊ฐ’์„ props๋กœ ์ถ”๊ฐ€ ์ „๋‹ฌ
// App.js
import React from "react";
import Hello from "./Hello";

function App() {
  return (
    <div className="App">
      <Hello name="bori" color="#999" />
    </div>
  );
}

export default App;
// Hello.js
import React from "react";

function Hello(props) {
  return <div style={{ color: props.color }}>Hey, {props.name}</div>;
}

export default Hello;
  • props ๋‚ด๋ถ€ ๊ฐ’์„ ์กฐํšŒํ•  ๋•Œ๋งˆ๋‹ค props.๋ฅผ ๋ถ™์ž„
    => ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น(๋˜๋Š” ๊ตฌ์กฐ ๋ถ„ํ•ด)๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด ์ฝ”๋“œ ๊ฐ„๊ฒฐํ™”
// Hello.js
import React from "react";

function Hello({ name, color }) {
  return <div style={{ color: color }}>Hey, {name}</div>;
}

export default Hello;

๐ŸŽฒ defaultProps๋กœ ๊ธฐ๋ณธ๊ฐ’ ์„ค์ •

  • defaultProps ๊ฐ’์„ ์„ค์ •
    => ์ปดํฌ๋„ŒํŠธ์— props๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ์‚ฌ์šฉํ•  ๊ฐ’์„ ์„ค์ •
import React from "react";

function Hello({ name, color }) {
  return <div style={{ color: color }}>Hey {name}</div>;
}

Hello.defaultProps = {
  name: "์ด๋ฆ„ ์—†์Œ",
};

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

function App() {
  return (
    <div className="App">
      <Hello name="bori" color="#999" />
      <Hello color="#333" />
    </div>
  );
}

export default App;

๐ŸŽฒ props.childred

  • props.childred ์กฐํšŒ : ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ ์‚ฌ์ด์— ๋„ฃ์€ ๊ฐ’์„ ์กฐํšŒ
  • srcํด๋”์— Wrapper ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ
    => Wrapper ํƒœ๊ทธ ๋‚ด๋ถ€์— Hello ์ปดํฌ๋„ŒํŠธ ๋„ฃ๊ธฐ
    => Wrapper ์ปดํฌ๋„ŒํŠธ๋ฅผ App ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ
  • Wrapper์˜ ๋‚ด๋ถ€ ๋‚ด์šฉ์ด ๋ณด์—ฌ์ง€๋ ค๋ฉด props.children์„ ๋ Œ๋”๋ง ํ•ด์ค€๋‹ค.
    => props.children๊ฐ€ ์—†์œผ๋ฉด Hello ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค.
// Wrapper.js
import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid #333",
    padding: "15px",
  };

  return <div style={style}>{children}</div>;
}

export default Wrapper;
// App.js
import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="bori" color="#999" />
      <Hello color="#333" />
    </Wrapper>
  );
}

export default App;

๐ŸŽฒ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง

  • ํŠน์ • ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฒฐ๊ณผ๋ฌผ์„ ๋ Œ๋”๋ง ํ•˜๋Š” ๊ฒƒ
  • App ์ปดํฌ๋„ŒํŠธ์—์„œ Hello ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ. isSpecial์ด๋ผ๋Š” props๋ฅผ ์„ค์ •
    => Hello ์ปดํฌ๋„ŒํŠธ์—์„œ isSpecial์ด ture์ด๋ƒ false์ด๋ƒ์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ์˜ ์ขŒ์ธก์— *ํ‘œ์‹œ ์—ฌ๋ถ€
// App.js
function App() {
  return (
    <Wrapper>
      <Hello name="bori" color="#999" isSpecial={true} />
      <Hello color="#333" />
    </Wrapper>
  );
}
// Hello.js
// ์‚ผํ•ญ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ
function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial ? <b>*</b> : null}
      Hey {name}
    </div>
  );
}

  • ๋‹จ์ˆœํžˆ ํŠน์ • ์กฐ๊ฑด์ด true๋ฉด ๋ณด์—ฌ์ฃผ๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ˆจ๊ธฐ๋Š” ๊ฒฝ์šฐ
    => &&์—ฐ์‚ฐ์ž ์‚ฌ์šฉ
    {isSpecial ? <b>*</b> : null} => {isSpecial && <b>*</b>}

๋‹จ์ถ•ํ‰๊ฐ€(short-circuit evaluation) ๋…ผ๋ฆฌ ๊ณ„์‚ฐ๋ฒ•

true && true; // true
true && false; // false
true || false; // ture
false || true; // trus
false || false; // ๋’ค์— false๊ฐ€ ์ถœ๋ ฅ
  • A && B : A๊ฐ€ Truthyํ•œ ๊ฐ’์ด๋ผ๋ฉด B๊ฐ€ ๊ฒฐ๊ณผ๊ฐ’์ด ๋˜๊ณ , A๊ฐ€ Falsyํ•œ ๊ฐ’์ด๋ผ๋ฉด ๊ฒฐ๊ณผ๋Š” A๊ฐ€ ๋œ๋‹ค.
  • A || B : A๊ฐ€ Truthyํ•œ ๊ฐ’์ด๋ผ๋ฉด A๊ฐ€ ๊ฒฐ๊ณผ๊ฐ’, A๊ฐ€ Falsyํ•œ ๊ฐ’์ด๋ผ๋ฉด ๊ฒฐ๊ณผ๋Š” B

๐ŸŽฒ props ๊ฐ’ ์„ค์ • ์ƒ๋žต = {true}

  • ์ปดํฌ๋„ŒํŠธ์˜ props ๊ฐ’์„ ์„ค์ •ํ•  ๋•Œ, props ์ด๋ฆ„๋งŒ ์ž‘์„ฑํ•˜๊ณ  ๊ฐ’์„ ์ƒ๋žตํ•œ๋‹ค๋ฉด, true๋กœ ์„ค์ •ํ•œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ
    isSpecial = isSpecial={true}

์ฐธ๊ณ 

0๊ฐœ์˜ ๋Œ“๊ธ€