[React] - Props

Na Jeongยท2022๋…„ 11์›” 26์ผ
0

react

๋ชฉ๋ก ๋ณด๊ธฐ
3/11
post-thumbnail

๐Ÿ“Props์˜ ์ •์˜

props๋ž€ ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ๊ฐ’์„ ์˜๋ฏธํ•˜๋ฉฐ, ๋” ์ •ํ™•ํžˆ๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ด๋‹ค.
props๋ฅผ ์ด์šฉํ•ด์„œ ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ์–ด๋–ค ๊ฐ’์ด๋“ (๋ณ€์ˆ˜, ํ•จ์ˆ˜, state๊ฐ’, event handler ๋“ฑ..) ๋ชจ๋‘ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Props๋Š” ์–ธ์ œ ์‚ฌ์šฉํ• ๊นŒ?

๐Ÿ– ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ์˜ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ

์•„๋ž˜ ์ฝ”๋“œ์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” '๊ฐ•์•„์ง€'๋ผ๋Š” ๋ฌธ์ž์—ด์„ animal์ด๋ผ๋Š” ๋ณ€์ˆ˜์— ๋‹ด์•„ ๊ด€๋ฆฌํ•œ๋‹ค.
์—ฌ๊ธฐ์—์„œ animal์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด

{animal}

๊ณผ ๊ฐ™์ด ํ™”๋ฉด์— ํ‘œ๊ธฐํ•  ์ˆ˜ ์žˆ๋‹ค.

import React from 'react';

const Parent = () => {
  const animal = '๊ฐ•์•„์ง€';

  return (
    <>
      <h1>๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.</h1>
      <p>{animal}</p>
    </>
  );
};

export default Parent;

๋งŒ์•ฝ์— Parent ์ปดํฌ๋„ŒํŠธ์˜ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์ธ Child ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค.
์ด ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์™€ ๋˜‘๊ฐ™์ด ํ™”๋ฉด์— '๊ฐ•์•„์ง€'๋ผ๋Š” ๋ฌธ์ž์—ด์„ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์„ ๋•Œ props๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

// Parent.js (๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ)
import React from 'react';

const Parent = () => {
  const animal = '๊ฐ•์•„์ง€';

  return (
    <>
      <h1>๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.</h1>
      <p>{animal}</p>
      <child pet={animal} englishName="dog" />
    </>
  );
};

export default Parent;

๋จผ์ € Child ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  import๋ฅผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Child ์ปดํฌ๋„ŒํŠธ๋ฅผ return ๋ฌธ ๋‚ด์— ๋„ฃ์–ด์ค€๋‹ค.
๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณด๋‚ด์–ด์ฃผ์–ด์•ผ ํ• ๊นŒ?

์œ„์˜ ์ฝ”๋“œ์—์„œ ๋ณด๋ฉด ๋ถ€๋ชจ ์บ„ํฌ๋„ŒํŠธ์—๋„ ์ด๋ฏธ ์„ ์–ธ์ด ๋˜์–ด์žˆ๊ณ , ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ํ•„์š”๋กœ ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋Š” animal์ด๋ผ๋Š” ๋ณ€์ˆ˜์ด๋‹ค.

๋ณด๋‚ด์ฃผ๊ณ ์ž ํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ํŒŒ์•…๋˜์—ˆ๋‹ค๋ฉด ํƒœ๊ทธ์— ์†์„ฑ์„ ์ฃผ์ž…ํ•˜๋“ฏ pet={animal} ๊ณผ ๊ฐ™์ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ์†์„ฑ ๊ฐ’์„ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.
์—ฌ๊ธฐ์—์„œ pet์€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์„ ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์ธ์‹ํ‘œ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.
'๊ฐ•์•„์ง€'๋ผ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ animal์ด๋ผ๋Š” ๊ทธ๋ฆ‡์— ๋‹ด๊ฒจ์žˆ๋“  ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์„ ์–ธ๋œ animal์ด๋ผ๋Š ๋ณ€์ˆ˜๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ๋„˜๊ฒจ์ค„ ๋•Œ pet์ด๋ผ๋Š” ๊ทธ๋ฆ‡์— ๋‹ด์•„ ๋ณด๋‚ด์ฃผ๋Š” ๊ฒƒ !

๐Ÿ– ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ์˜ ์ „๋‹ฌ ๋ฐ›์€ ๋ฐ์ดํ„ฐ ์ ์šฉ

// Child.js(์ž์‹ ์ปดํฌ๋„ŒํŠธ)

import React from 'react';

const Child = (props) => {
  return (
    <>
      <h2>์ž์‹ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.</h2>
      <p>{props.pet}</p> // ๊ฐ•์•„์ง€
      <p>{props.englishName}</p> // dog
    </>
  );
};

export default Child;

ํ•จ์ˆ˜์—์„œ ์ธ์ž๋ฅผ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜๋“ฏ, ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ๋˜ํ•œ const Child = (๋งค๊ฐœ๋ณ€์ˆ˜) => {} ์™€ ๊ฐ™์ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ณด๋‚ด์ค€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ props๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๋ช…์‹œ์ ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด const Child = (props) => {}๋ผ๊ณ  ๋งค๊ฐœ๋ณ€์ˆ˜ ์ด๋ฆ„์„ props๋กœ ์ง“๋Š”๊ฒƒ์ด ์ปจ๋ฒค์…˜์ด๋ผ๊ณ  ํ•œ๋‹ค.

{props.pet} | {props.englishName}์œผ๋กœ ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๋ฉด ์›ํ•˜๊ณ ์ž ํ•˜๋Š” '๊ฐ•์•„์ง€'์™€ 'dog'์„ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ– ํ•จ์ˆ˜ ์ „๋‹ฌ๊ณผ ์ ์šฉ

ํ•จ์ˆ˜๋ฅผ ๋ณด๋‚ด๊ณ  ์ ์šฉ์‹œํ‚ฌ ๋•Œ๋Š” ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

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

const Parent = () => {

	const testConsole = () => {
    	console.log('ํ…Œ์ŠคํŠธ');
  	};
	
    return (
    	<>
        	<h1>๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ</h1>
            <button onClick={testConsole}>ํด๋ฆญ</button>
            <Child test={testConsole} />
        </>
    );
};

export default Parent;

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— testConsole์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , ๋ฒ„ํŠผ์˜ ํด๋ฆญ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์— ๊ฑธ์–ด์ฃผ์—ˆ๋‹ค.
ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ, ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ „๋‹ฌํ•˜๊ณ ์ž ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์–ด๋–ค ์ด๋ฆ„์œผ๋กœ ๋„˜๊ฒจ์ค„์ง€ ์ •ํ•ด์ค€๋‹ค. ์œ„์˜ ์ฝ”๋“œ์—์„œ๋Š” test๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๋„˜๊ฒจ์ฃผ๋„๋ก ์ •ํ•ด์ค€ ๊ฒƒ!

// Child.js (์ž์‹ ์ปดํฌ๋„ŒํŠธ)

import React from 'react';

const Child = (props) => {
  console.log(props); // {test: () => {console.log('ํ…Œ์ŠคํŠธ')}}

  return (
    <>
      <h2>์ž์‹ ์ปดํฌ๋„ŒํŠธ</h2>
      <button onClick={props.test}>ํด๋ฆญ</button>
    </>
  );
};

export default Child;

์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ props๋กœ ๋ฐ›์•„์™€ props.test๋กœ ๋ถˆ๋Ÿฌ๋‹ค ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

profile
๋Š์ž„์—†์ด ๋…ธ๋ ฅํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž (โธโธโขโธโธ) เท†

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