Props란? Props를 사용하는 방법

Props란? Props의 사용방법

Props란?

• Props는 Properties의 줄임말이다.
• 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법
• Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변경하고 싶으면 부모 컴포넌트에서 state를 변경 시켜야한다.)

Props의 사용

//App.js
const App = () => {
  return <Text text='Hello world!'/>

//Text.js
const Text = ({text}) => {
  return <div>{text}</div>
}

위의 코드는 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 Props를 사용해서 “Hello world!” 라는 문자열 데이터를 전달했다.

여러개의 Props 와 defaultProps

• 부모 컴포넌트에서 여러개의 props를 넘겨줄 수 있다.
• props 내부의 값을 조회 할 때, 비구조화 할당 문법을 사용하면 간결하게 작성가능하다.
• 컴포넌트에 props를 지정하지 않았을 때, 기본값을 설정하고 싶으면 defaultProps 값을 설정한다.

App.js

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

function App() {
    return (
        <>
        <Text text="Hello world!" color="red"/>
        <Text color="blue"/>
        </>
    );
}

export default App;

Hello.js

import React from 'react';

function Hello({ color, name }) {
    return <div style={{ color }}>{text}</div>
}

Hello.defaultProps = {
    text: '기본값 텍스트 입니다.'
}

export default Hello;

컴포넌트 태그 사이에 넣은 값 조회 - props.children

• 컴포넌트 태그 사이에 넣은 값을 조회하기 위해서는 children 값을 사용하면 된다.

App.js

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

function App() {
    return (
        <Wrapper>
            <Hello text="Hello world!" color="red"/>
            <Hello color="blue"/>
        </Wrapper>
    );
}

export default App;

• Hello컴포넌트를 Wrapper 컴포넌트 내부에 넣었을때, 브라우저에서는 Hello컴포넌트가 렌더링 되지 않는다.

Wrapper.js

import React from 'react';

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

export default Wrapper;

• 내부의 내용이 보여지게 하기 위해선 props.children을 렌더링 해주어야 한다.

Props의 조건부 렌더링

• 특정 조건에 따라서 다른 결과물을 렌더링 하는 것

App.js

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

function App() {
    return (
        <Wrapper>
            {/*<Hello name="Hello world!" color="red" isSpecial={true}/>*/}
            <Hello name="react" color="red" isSpecial />
            <Hello color="blue"/>
        </Wrapper>
    );
}

export default App;

• isSpecial 값 설정을 생략하면 ={true} 값이 자동 설정된다
• Hello컴포넌트에서는 isSpecial값이 true 이면 해당 하는 값을 렌더링 하도록 한다.

Hello.js

import React from 'react';

function Hello({ color, name, isSpecial }) {
    return <div style={{ color }}>
        { isSpecial && <b>isSpecial이 true 입니당 </b>}
        {/*isSpecial이 false일때 false이고, 
                true일때 '<b>isSpecial이 true 입니당 </b>' 가 된다.*/}
        안녕하세요 {name}
    </div>
}

Hello.defaultProps = {
    name: '기본값 텍스트 입니다'
}

export default Hello;