[React] Study #4 | Props를 통한 컴포넌트간의 값 전달

💡Props?

• Properties의 줄임말
• 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때, props를 사용

---

Props의 기본 사용법

1️⃣ 하나의 props 전달

Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name 이라는 값을 전달해주고 싶을 경우

App.js

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

function App() {
  return (     
      <Hello name="react"/> // name값을 Hello 컴포넌트에게 보내기
  );
}

export default App;

Hello.js (받아온 컴포넌트 사용하기)

import React from 'react';

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

export default Hello;

• 컴포넌트에 전달되는 props는 파라미터를 통해 조회가능
• props는 객체 형태로 전달됨
• name 값을 조회하고 싶다면 props.name을 조회하면 됨

 

2️⃣ 여러개의 props, 비구조화 할당

EX)App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name과 color 이라는 값을 전달해주고 싶을 경우

App.js

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

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

export default App;

Hello.js

import React from 'react';

function Hello(props) {
    return <div style={{color: props.color}}>제가 한번 해보겠습니다, {props.name}!</div>
}

export default Hello;

 

❗️props 내부의 값을 조회할 때마다 props. 를 입력하고 있는데,

❗️함수의 파라미터에서 비구조화 할당 (혹은 구조분해) 문법을 사용하면 조금 더 코드를 간결하게 작성 가능!

 

Hello.js (비구조화 할당)

import React from 'react';

function Hello({color, name}) {
    return <div style={{color}}>제가 한번 해보겠습니다, {name}!</div>
}

export default Hello;

결과 화면

 

3️⃣ defaultProps로 기본값 설정

Hello.js

import React from 'react';

function Hello({color, name}) {
    return <div style={{color}}>제가 한번 해보겠습니다, {name}!</div>
}

Hello.defaultProps = {
    name : '이거슨 기본이름'
}

export default Hello;

App.js

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

function App() {
  return (    
      <> 
        <Hello name="react" color="red"/> 

        {/* 기본 값이 들어갈 파란색 글자 */}
        <Hello color="blue" />  
      </>
  );
}

export default App;

결과 화면

 

4️⃣ props.children

• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을땐, props.children 조회!

Wrapper.js (props.children을 사용하는 새로운 컴포넌트)

import React from 'react';

function Wrapper({name}) {
    const style = {
        border: '2px solid black',
        padding: '16px',
    }
    return(
        <div style={style}>
            
        </div>)
}

export default Wrapper;

App.js

import React from 'react'; 
import Hello from './Hello'; 
import Wrapper from "./Wrapper"; 

function App() {
  return (   
    
      // Wrapper 사용해보기!
      <Wrapper> 
        <Hello name="react" color="red"/> 

        {/* 기본 값이 들어갈 pick색 글자 */}
        <Hello color="blue" />  
      </Wrapper>
  );
}

export default App;

❗️이렇게 Wrapper 태그 내부에 Hello 컴포넌트 두개를 넣었을때, Hello 컴포넌트는 보이지 않는 것을 확인할 수 있다.

안보영!

❗️내부의 내용이 보여지게 하기 위해서는 Wrapper에서 props.children을 렌더링 해줘야함

import React from 'react';

function Wrapper({children}) {
    const style = {
        border: '2px solid black',
        padding: '16px',
        width: '100px',
        height: '100px',
    }
    return(
        <div style={style}>
            {children}
        </div>)
}

export default Wrapper;

출력화면

 

 

 

---

Reference

https://react.vlpt.us/