[React] 리액트 props / props란?

※ 본 포스팅은 윈도우11 환경에서 인프런 강의를 수강하며 정리한 내용입니다.

---

 

목차

 

props란?

props 특징

props 사용법

 

---

 

---

[props란?]

props(properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용한다.

Component에게 전달되는 props는 파라미터를 통하여 조회할 수 있다.

props는 property의 의미로 재산이라는 뜻도 있지만 속성, 특성이라는 뜻도 가지고 있다.

 

props는 Component의 입력으로 들어간다.

props는 Component의 입력으로 들어간다.

 

 

---

props는 Component의 입력으로 들어간다.

리액트에서 props는 React Component의 속성이다.

• Component : 붕어빵 틀
• Element : 붕어빵
• props : 붕어빵 재료

 

같은 붕어빵이라도 넣는 재료에 따라 다른 맛이 난다.

이처럼 props는 같은 React Component에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때는 사용하는 컴포넌트의 속 재료다.

props와 Component, Recact Element의 관계

 

 

이미지가 있고 하단에는 이미지에 대한 장소, 요약된 설명이 있는 형태다.

세 component 모두 동일한 형태를 가지고 있다.

하지만 안에 있는 이미지, 제목, 설명은 다르다.

https://www.airbnb.co.kr/phoenix-az/stays/mansions

 

총 3개의 이미지가 있다.

모양은 모두 같다.

하지만 이미지와 텍스트는 모두 다르다.

이것을 React Component의 관점에서 보면 3가지 모두 다 같은 컴포넌트에서 생성된 element라고 할 수 있다.

 

각각 다른 이미지와 텍스트를 가지고 있는 것은 props 때문이다.

이러한 Component의 모습과 속성을 결정하는 것이 바로 props다.

 

props는 Component에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.

Component의 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 Element를 화면에 렌더링 하고 싶을 때 해당 데이터를 props에 넣어서 전달한다.

 

[예시 코드]

// Tutorial.js //
import React from "react";

function Tutorial(props){
    return <div>재미있는 {props.name} 공부!</div>;
}

export default Tutorial;

 

// App.js //

import React from "react";
import Tutorial from "./Tutorial.js";


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

export default App;

 

 

 

 

---

[props 특징]

props의 중요한 특징은 read-only로 읽기 전용이다.

읽기 전용이기 때문에 값을 변경할 수 없다.

props의 값을 React component가 element를 생성하기 위해 사용하는 값이다.

이 값들이 element를 생성하는 도중에 갑자기 바뀌어 버리면 제대로 된 element가 생성될 수 없다.

붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 같다.

// 물론 배를 가르고 다시 채워 넣을 수 있지만 그것은 상품 가치가 떨어진다.

 

다른 props의 값으로 element를 생성하려면 새로운 값을 component에 전달하여 새로 element를 생성하면 된다.

이 과정에서 element가 다시 렌더링 된다.

 

자바스크립트 함수에는 두 가지 종류가 있다.

pure 함수 : 입력값을 변경하지 않으며 입력 값에 대해서는 항상 같은 출력값을 리턴

impure 함수 : 입력으로 받은 파라미터의 값을 변경

 

// pure 함수
function sum(a,b){
	return a+b;
}

입력한 값을 변경하지 않으며 입력 값에 대해서는 항상 같은 출력 값을 리턴하는 이러한 코드를 pure 한 함수라고 한다.

 

function withdraw(account,amount){
	return account.total-=amount;
}

입력으로 받은 파라미터의 account의 값을 변경했다.

이러한 코드를 impure 한 함수라고 한다

 

리액트 공식 문서에는 모든 React component는 그들의 props에 관해서는 pure함수 같은 역할을 해야 한다고 나와있다.

모든 React component는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것이다.

React component가 자바스크립트의 함수와 같은 개념이다.

그렇기 때문에 React component의 입력값으로 들어오는 props는 자바스크립트 함수의 파라미터와 같다.

함수가 pure 하다는 것은 함수의 입력값인 파라미터를 바꿀 수 없다는 것을 의미한다.

그렇기 때문에 React component에서는 props를 바꿀 수 없다.

pure 함수는 같은 입력 값에 대해서는 항상 같은 결과를 보여주어야 하기 대문에 React component 관점에서 같은 porps에 대해서 항상 같은 결과를 보여줘야 한다는 의미가 된다.

여기서 결과는 React element가 된다.

---

 

<정리>

React component의 props는 바꿀 수 없고 props가 들어오면 항상 같은 element를 리턴해야 한다.

 

 

 

---

[props 사용법]

props는 component에 전달할 다양한 정보를 담고 있는 자바스크립트 객체다.

props를 사용하는 방법은 2가지가 있다.

1. JSX를 사용하여 props 사용
2. JSX를 사용하지 않고 props 사용

 

<JSX를 사용하여 props를 사용하는 방법>

JSX를 사용하는 경우에는 이 코드와 같이 키와 값으로 이루어진 키값상의 형태로 component에서 props를 넣을 수 있다.

function App(props){
	return(
    	<Profile
        	name="리액트"
            introduction = "안녕하세요. 저는 리액트입니다."
            viewCount={1500}
        />
    );
}

 

이 코드에는 App component가 나오고 그 안에서 Profile component를 사용하고 있다.

Profile component에서는 name, introduction, viewCount 3가지 속성이 있다.

각 속성에 값을 넣을 때 name, introduction은 중괄호를 사용하지 않았고,

viewCount는 중괄호를 사용했다.

중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다.

props에 값을 넣을 때에도 문자열 이외의 정수, 변수 그리고 다른 component 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 한다.

문자열도 중괄호로 감싸도 상관은 없다.

이 속성의 값들이 모두 Profile component의 props로 전달되면 props는 다음과 같은 형태의 자바스크립트 객체가 된다.

{
	name:"리액트",
    introduction:"안녕하세요.저는 리액트입니다.",
    viewCount:1500
}

---

props의 중괄호를 사용하여 props의 값으로 component도 넣을 수 있다.

function App(props){
	return(
    	<Layout
        	width = {2560}
            height = {1440}
            header = {
            	<Header title="리액트 블로그 입니다."/>
            }
            footer = {
            	<Footer/>
            }
        />
    );
}

Layout처럼 component의 props로는 정수 값을 가진 width, height와 React element로 Header, Footer가 들어오게 된다.

이처럼 JSX를 사용하는 경우에는 간단하게 component에 props를 넣을 수 있다.

 

<JSX를 사용하지 않고 props를 사용하는 방법>

리액트의 createElement 함수가 있다.

React.createElement(
	type,
    [props],
    [...children]
)

props에 자바스크립트 객체를 넣으면 해당 컴포넌트의 props가 된다.

React.createElement(
	Profile,
    {
    	name : "리액트",
        introduction : "안녕하세요, 리액트입니다.",
        viewCount:1500
    },
    null
);

<코드 설명>

• Type : 컴포넌트의 이름은 Profile
• props : 자바스크립트 객체가 들어간다.
• children : 하위 컴포넌트가 없어 null이 들어갔다.

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

 

<a href="https://www.flaticon.com/kr/free-icons/" title="피자 아이콘">피자 아이콘  제작자: Freepik - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/" title="팥 아이콘">팥 아이콘  제작자: justicon - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/-" title="타이 야키 아이콘">타이 야키 아이콘  제작자: Freepik - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/-" title="슈퍼 볼 아이콘">슈퍼 볼 아이콘  제작자: amonrat rungreangfangsai - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/" title="크림 아이콘">크림 아이콘  제작자: Kanyanee Watanajitkasem - Flaticon</a>