[ReactJS] TIL #4

Props

Props 부모 component로부터 자식 component에 데이터를 보낼 수 있게 해주는 방법

 

Style은 같지만 Content만 다른 버튼 두 개 만들기

동일한 style에 content만 다른 버튼 두 개를 생성하려면 style 속성을 지닌 Btn function을 하나 작성하고 화면에 각각 다른 content를 전달하는 <Btn /> 두 개를 render하면 된다

이를 전달하는 방법은 Btn function이 <Btn />의 props를 function의 () 안에 parameter로 전달하는 것이다

function Btn({propsA}){
	return <button>{propsA}</button>
}

function App(){
	<div>
    	<Btn propsA="hello" />
        <Btn propsA="bye" />
    </div>
}

---

function Btn(hello){
	return <button>{hello.propsA}</button>
}

function App(){
	<div>
    	<Btn propsA="hello" />
        <Btn propsA="bye" />
    </div>
}

위는 이렇게도 작성될 수 있다

 

이를 바탕으로 버튼 두개를 만드는 코드를 작성하면 다음과 같다

        function Btn({imContent, bigFont}){ // ==> funtion Btn(props) 이와 같음
            return <button
                        style={{
                            backgroundColor: "tomato",
                            color: "white",
                            border: "solid 1px white",
                            fontSize: bigFont ? "30px" : "10px"
                        }}>
                        {imContent} {/* ==> {props.hello} 이와 같음 (위 주석 참고) */}
                    </button>
        }   

        function App() {
            return(
                <div>
                    <Btn imContent="Big" bigFont="true"/>
                    <Btn imContent="Small"/>
                </div>                
            )
        }

        const root = document.getElementById("root");
        ReactDOM.render(<App />, root)