[React] 리액트 props 사용방법

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

---

 

목차

 

props란?

여러 개의 props 비구조화 할당

defaultProps로 기본값 설정

props.children

 

---

 

<props 개념>

https://devyihyun.tistory.com/171

[React] 리액트 props / props란?

 

---

[props란?]

props (properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때, 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는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name을 조회하면 된다.

---

[여러 개의 props 비구조화 할당]

props를 사용하여 style을 적용할 수 있다.

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

function Tutorial({color,name}){
    return <div style ={{color}}>재미있는 {name} 공부!</div>;
    // {{}} : 객체를 감싸는 중괄호
}

export default Tutorial;

 

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


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

export default App;

 

props 내부의 값을 조회할 때마다 props. 를 입력해야 한다.

함수의 파라미터에서 비구조화 할당(=구조 분해) 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다.

비구조화 할당?

https://devyihyun.tistory.com/128

[JavaScript] 자바스크립트 객체

 

https://devyihyun.tistory.com/130

[JavaScript] 자바스크립트 spread와 rest

 

---

[defaultProps로 기본값 설정]

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.

특정 값을 지정하지 않았을 때 기본적으로 사용할 값을 defaultProps라고 한다.

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

function Tutorial({color,name}){
    return <div style ={{
        color
    }}>재미있는 {name} 공부!</div>;
    // {{}} : 객체를 감싸는 중괄호
}
Tutorial.defaultProps={
    name : "이름 없음"
};//Tutorial이라는 defaultProps 객체
export default Tutorial;

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


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

export default App;

 

---

[props.children]

어떠한 태그에 내용을 넣는다. 하지만 태그가 아닌 컴포넌트에 값을 조회하기 위해 사용하는 것이 props.children이다.

// studychildren.js //

import React from "react";

function StudyChildren({children}){
    const style={
        border: '2px solid black',
        padding: '16px',
    };

    return (
        <div style={style}>
            {children}
        </div>
      )
}

 

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

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

export default App;

 

---

<정리>

props(부모) : 쓰이는 곳(App.js)에서 값을 정한다. 컴포넌트 내부에서 코드를 작성한다. 

props.children : 쓰임 당하는 곳 (Tutorial.js나 studychildren.js)에서 값을 정한다. 컴포넌트 태그 사이에 값이 있을 때 children이라는 예약어를 사용한다.

 

 

---

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

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

 

[ 참고자료 ]

 

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook