React Props?

react 에서 props 가 쓰이는 용도는 다음과 같습니다. string interpolation. 이게 핵심입니다.

 

예를 들면 이렇습니다.

아래의 Button.style.js 에 있는 styled(Button) 은 일종의 props (property) 라고 볼 수 있습니다.

App.js 의 

      <StyledButton buttonLabel="Click Here with the faith" backgroundColor="violet"> </StyledButton>

 

을 보면 뭘까요. 자, 침착하세요. 이 글을 다시보는 나, 그리고 누군가인 당신도요.

 

우선 StyledButton 은 변수명입니다. 

buttonLabel 도 Button.style.js 파일에 있는 변수명입니다.

backgroundColor 는 약속된 새로운 react 의 무언가가 아니라, 이게 바로 props 의 정체입니다.

 

그럼, props 는 어떻게 쓸까요?

export const StyledButton = styled(Button)`

    width: 200px;

    height: 50px;

    background-color: ${(props) => props.backgroundColor};

 

자세히 보면, props.backgroundColor 라고 되어 있습니다.

그 앞에는 뭐가 있을까요. background-color . CSS 에서 다룬 약속된 호출 문법/명령어(?) 입니다.

 

background-color 라고 되어 있는 걸, '앞으로는 backgroundColor 로 호출해도 똑같이 작동하게 만들어 줘!' 라고 하는 일종의 '암구호(가칭)'입니다. 이를 위해서는 반드시 암구호 앞에 props 가 있어야 합니다.

 

일종의 예시는 이렇습니다.

const Component = (props) => {

   //rules;

}

 

따라서, Button props 를 참고해서, props 로 backgroundColor 라고 하면.

일종의 Button 을 참고하고, 실행 하기 위한 다음 단계로 자동 넘겨주기가 됩니다.

자세히 보면, {} 이 기호가 있는데, 백틱`` 도 있습니다.

 

props 를 사용하기 위한 조건이 다 보이죠. 백틱과 {이 괄호} 입니다. 이게 구성 되면, 소위 말하는 약속된 특정 문구 호출 시, 자동 변환(return) 이 됩니다.

 

이게 props 의 정체였습니다.

 

자 이제 문제는, 저만 이해 할 수 있게 적은 건지도 몰겠네요.

조만간 다시 다듬어 보겠습니다.

 

prototype 개념을 이해한 보람이 좀 느껴지는 순간이었습니다.

 

Button.style.js

import styled from 'styled-components';
import Button from './Button';


export const StyledButton = styled(Button)` // <= 여기!
    width: 200px;
    height: 50px;
    background-color: ${(props) => props.backgroundColor};

    &:hover {
        & label {
            color: green;
        }
    }
`;

export const ButtonLabel = styled.label`
    font-size: 25px;
    color: white;
`

Button.js

import React from 'react'

function Button( { className, buttonLabel }) {
    return <button className={className}> {buttonLabel} </button>;
}

export default Button;

App.js

import { StyledButton } from './Components/Button.style';
import { AppContainer } from './Components/Container.style';
import { GlobalStyles } from './Components/GlobalStyles.styles';

function App() {
  return (
    <AppContainer>
      <GlobalStyles />
      <StyledButton buttonLabel="Click Here with the faith" backgroundColor="violet"> </StyledButton>
      <StyledButton buttonLabel="I am" backgroundColor="red"> </StyledButton>
      <StyledButton buttonLabel="your father" backgroundColor="blue"> </StyledButton>
    </AppContainer>
  );
}

export default App;

https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0

What is “Props” and how to use it in React?

https://www.youtube.com/watch?time_continue=231&v=KvapOdsFK5A&feature=emb_title