React / part.3 props

props

해당 글에서는 앞선 Hook에 대한 글에 이어 리액트에서 중요한 개념인 props에 대해 다룹니다.

state에 대한 내용은 다른 글에서 자세히 다룹니다.

---

1. props란?

컴포넌트의 속성값

⇒ 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체를 말한다.

 

부모 컴포넌트에서 이미 선언한 데이터를 자식 컴포넌트에서 사용하려고할 때

전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능하다.

⇒ 문자, 숫자, 변수, 함수까지 모든 타입의 데이터를 전달한다.

 

자식 컴포넌트에서 중복으로 선언할 수 없기 때문에 props를 사용한다.

⇒ 자식 컴포넌트에 속성처럼 주입하는 방식이다.

 

여기서 중요한 점은 Props는 읽기 전용이라는 것이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 된다.

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

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면

JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.

이 객체를 “props”라고 한다.

다시말해, 부모 컴포넌트로부터 받은 props를 자식컴포넌트에서 수정할 수 없다.

 

 

2. props 사용하기

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

속성처럼 pet이라는 것을 임의로 만들고 그 값으로 호랑이가 들어간 {animal}을 넣는다.

// Parent.js(부모 컴포넌트)

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

const Parent = () => {
  const animal = '호랑이'; 
//const animal = '호랑이'를 자식 컴포넌트에서 사용하려고 할 때

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <Child pet={animal} englishName="tiger" />
//속성처럼 pet이라는 것을 임의로 만들고 그 값으로 호랑이가 들어간 {animal}을 넣는다.
    </>
  );
};

export default Parent

 

2. 부모 컴포넌트로부터 받은 데이터를 자식 컴포넌트에서 사용하는 방법

⇒ 하나의 객체로 합쳐져서 자식 컴포넌트로 전달

=> props = {pet: '호랑이', englishName: 'tiger'}

매개변수 이름을 props로 짓는 것이 컨벤션

// Child.js(자식 컴포넌트)

import React from 'react';

const Child = (props) => { // 매개변수 이름을 props로 짓는 것이 컨벤션
  console.log(props);            // {pet: '호랑이', englishName: 'tiger'}

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{props.pet}</p>         
			// {props.pet} {key:value} {pet:호랑이}
      <p>{props.englishName}</p> 
			// {props.englishName} {key:value} {englishName:tiger}
    </>
  );
};

export default Child;

{key:value} 형태

<p>{props.pet}</p>

// {props.pet} {key:value} {pet:호랑이}

 

 

3. 매개변수로 함수 받아오기

부모 컴포넌트에서 output은 동일하다.

함수명을 그대로 전달하면 된다.

import React from 'react';

const Child = (props) => {
  console.log(props);

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <button onClick={props.test}>클릭</button>
    </>
  );
};

export default Child;

 

---

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!