Props, children prop

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

React.js

메인으로 돌아가기

Props

Props 는 리엑트 컴포넌트에 부여된 속성값의 집합을 말합니다.

각각의 속성을 Prop이라고 하며 이는 HTML의 속성과는 다릅니다.

이전에 작성한 App.js에 아래와 같이 Dice 컴포넌트에 속성값을 입력해주고 싶을 때 props를 이용할 수 있습니다.

import Dice from './Dice'

function App(){
    return (
        <div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이렇게 하였을 때 컴포넌트는 어떻게 바꿔야 할까요? 아래의 Dice.js를 살펴봅시다.

// 주사위 사진 import
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';


const DICE_IMAGES = {
    blue : [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
    red : [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06]
};  

function Dice(props){
    const src = DICE_IMAGES[props.color][props.num-1];
    const alt = `${props.color} ${props.num}`
    return <img src={src} alt={alt} />
};

export default Dice;

Dice 컴포넌트에 인자로 props를 사용한 것을 볼 수 있습니다.

이제 react 개발자 도구를 살펴보면 다음과 같이 props에 color과 num이 컴포넌트에 속성으로, blue와 2가 속성값으로 넣어진 것을 확인할 수 있습니다.

개발자 도구에서 blue를 red로 num을 3으로 바꾸어 보면 아래와 같이 알맞게 보이는 것을 알 수 있습니다.

Children props

children prop를 사용함으로써 JSX에서 컴포넌트 속에 값을 담을 수 있습니다. 값이 아니더라도 다른 컴포넌트를 넣을 수도 있습니다.

이러한 컴포넌트를 위해서는 특수한 children prop를 써야합니다.

아래의 예를 살펴봅시다. src 디렉토리에 Button.js 라는 파일을 만들고 컴포넌트를 이미지 위에 App.js 에 추가시키겠습니다.

위와같이 되기 위해서 코드를 구성하면,

//Button.js
function Button ({text}){
    return <button >{text}</button>;
}

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button text="던지기"/>
                <Button text="처음부터"/>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

위의 코드는 prop를 활용한 코드입니다.

하지만 이것을 컴포넌트에 특정한 값이나, 다른 컴포넌트를 담는 방법으로 children prop를 사용해보겠습니다.

//Button.js
function Button ({children}){
    return <button >{children}</button>;
}

export default Button;

//App.js
import Button from './Button';
import Dice from './Dice'

function App(){
    return (
        <div>
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>
            <Dice color="blue" num={2} />
        </div>
    );
}

export default App;

이를 실행시켜 봅시다.

react 개발자도구에서 children이라는 prop에 값이 잘 전달된 것을 볼 수 있습니다.

React 홈으로 돌아가기

Made with SlashPage