[React JS] Props

부모 컴포넌트로부터 자식 컴포넌트(=function)에게 데이터를 전송하는 방식

=> Props

        const root = document.getElementById("root");
        const Btn = (props) => {
            return(  
            <button
             style={{
                 backgroundColor: "tomato",
                 color:"white",
                 padding:"10px 20px",
                 borderRadius:10,
                 border: 0,
             }}
            >{props.tomato}</button>
        )};
        const App = () => {
            return (
                <div>
                    <Btn tomato="Save Changes" />
                    <Btn tomato="Continue" />
                </div>
            );
        };
        ReactDOM.render(<App />, root);

 

부모 컨포넌트의 props 를 tomato로 지정한 후 자식 컨포넌트에 props.tomato로 설정하면

이와 같은 모습이 된다.

추가적으로 shortcut을 이용하면 자식 컴포넌트에 props로 지정하지 않고 {tomato}로도 가능하다.

        const root = document.getElementById("root");
        const Btn = ({tomato}) => {
            return(  
            <button
             style={{
                 backgroundColor: "tomato",
                 color:"white",
                 padding:"10px 20px",
                 borderRadius:10,
                 border: 0,
             }}
            >{tomato}</button>
        )};
        const App = () => {
            return (
                <div>
                    <Btn tomato="Save Changes" />
                    <Btn tomato="Continue" />
                </div>
            );
        };
        ReactDOM.render(<App />, root);

이렇게 작성해도 역시 같은 결과가 나온다.

또한 style안에서도 if else같은 조건문을 사용할 수 있다.

        const Btn = ({tomato, big}) => {
            return(  
            <button
             style={{
                 backgroundColor: "tomato",
                 color:"white",
                 padding:"10px 20px",
                 borderRadius:10,
                 border: 0,
                 fontSize: big ? 18 :16,
             }}
            >{tomato}</button>
        )};
        const App = () => {
            return (
                <div>
                    <Btn tomato="Save Changes" big={true}/>
                    <Btn tomato="Continue" big={false}/>
                </div>
            );
        };

tomato외 big props를 만들어줘서 fontSize에 삼항연산자를 넣어줬다.

결과