ReactJS로 영화 웹 서비스 만들기
https://nomadcoders.co/react-for-beginners/lobby
인강을 수강하며 정리한 글 입니다.
Props
Props는 일종의 방식이다. 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이라고 보면 된다.
여기서 컴포넌트란 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다. 재사용이 가능한 가각의 독립된 모듈을 뜻한다.
어떤 JSX를 반환하는 함수라고 보면 된다.
<!DOCTYPE html>
<html>
<body>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn(props){
return(
<button
style={{
backgroundColor: "tomato",
color:"white",
padding:"10px 20px",
boder:0,
borderRadius:10,
}}>{props.banana}</button>
);
}
function App(){
return(
<div>
<Btn banana="Save changes"/>
<Btn banana="Confirm"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />,root);
</script>
</html>위 코드에서 Btn 함수에서 받는 인자가 props이다. 함수가 받는 인자는 오로지 1개이다.
컴포넌트를 재사용하고 있는 것을 확인할 수 있다. 두 컴포넌트는 banana라는 임의로 생성한 속성 값을 가진다. 동일한 버튼이지만 banana라는 속성 값이 Save changes와 Confirm으로 다르다.
<!DOCTYPE html>
<html>
<body>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({banana}){
return(
<button
style={{
backgroundColor: "tomato",
color:"white",
padding:"10px 20px",
boder:0,
borderRadius:10,
}}>{banana}</button>
);
}
function App(){
return(
<div>
<Btn banana="Save changes"/>
<Btn banana="Confirm"/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />,root);
</script>
</html>간단하게 변경해서 사용할 수 있다.
<!DOCTYPE html>
<html>
<body>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({banana,big}){
return(
<button
style={{
backgroundColor: "tomato",
color:"white",
padding:"10px 20px",
boder:0,
borderRadius:10,
fontSize: big ? 18:16,
}}>{banana}</button>
);
}
function App(){
return(
<div>
<Btn banana="Save changes" big={true}/>
<Btn banana="Confirm" big={false}/>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />,root);
</script>
</html>function Btn({banana,big}) 와 같이 작성하여 속성 값을 두 개 받을 수 있다.
안녕하세요 코린입니다!