[React] 03. props

벨로퍼트와 함께하는 모던 리액트

• 벨로퍼트와 함께하는 모던 리액트: https://react.vlpt.us/
• 진도 - 1.5. props 를 통해 컴포넌트에게 값 전달하기

 

💬  props 를 통해 컴포넌트에게 값 전달하기

props 의 기본 사용법

// Hello.js

import React from 'react';

function Hello(props){
    return <div> 안녕하세요 {props.name} </div>
}

export default Hello;

// App.js

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

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

• props는 properties의 줄임말로, 어떠한 값을 컴포넌트에 전달해야 할 때 props를 사용한다

 

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

// App.js

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

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

// Hello.js(1) props 사용

import React from 'react';

function Hello(props){
    return(
        {/*
            style = { color: { props.color } }
            이렇게 되어야할것같은데 이건 에러 발생한다 주의하자
        */ }
        <div style = {{ color: props.color }} >
        안녕하세요 {props.name}
        </div>
    )
}

export default Hello;

// Hello.js(2) 비구조화 할당

import React from 'react';

function Hello({ color, name }){
    return(
        <div style = {{ color }} >
        안녕하세요 {name}
        </div>
    )
}

export default Hello;

// Hello.js(3) 비구조화 할당

import React from 'react';

function Hello({ backgroundColor, name }){
    return(
        <div style = {{ backgroundColor }} >
        안녕하세요 {name}
        </div>
    )
}

export default Hello;

• Hello.js(1): props를 사용하면 props에 담아온 name과 color 값을 꺼내어 사용하고 있다
• Hello.js(2): props 대신 비구조화 할당을 사용하면 코드를 더 간결하게 작성할 수 있다
• 매개변수의 이름이 곧 key가 되고, 담겨진 값이 value가 된다
• 비구조화 할당(구조분해 할당): 배열이나 객체의 속성을 분해해서, 그 값을 변수에 담을 수 있게하는 표현식

 

defaultProps

// Hello.jsimport React from 'react';

function Hello({ color, name }){
    return(
        <div style = {{ color }} >
        안녕하세요 {name}
        </div>
    )
}

Hello.defaultProps = {
    color: 'gray',
    name: 'noNamed'
}

export default Hello;

• 컴포넌트에 props의 기봄값을 설정하고 싶다면 컴포넌트에 defaultProps 값을 지정한다
• App.js에서 props를 전달하지 않으면 defaultProps의 값이 사용된다

 

props.children

// App.js
import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";
import './App.css';

function App() {
  const name = "React";
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, 
    padding: '1rem',
    textAlign: 'center'
  }


  return (
    <div className="App">
      <Wrapper>
        <Hello color="aqua" name="jjangu" />
        <h2 style={style}>{name}</h2>
      </Wrapper>
    </div>
  );
}

export default App;

// Wrapper.js

import React from 'react';

function Wrapper({children}){
    const style = {
        border: '10px solid black',
        padding: 16
    }

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

}

export default Wrapper;

• 컴포넌트 태그 사이에 있는 컨텐츠는 브라우저에서 보여지지 않는다
• 내부의 내용을 보여지게 하기위해서는 props.children을 렌더링해주어야 한다