[React] Props
학습일 : 2023. 03. 14
Props란?
properties (속성)의 약자.
React 컴포넌트는 props를 사용하여 서로 통신한다.
모든 부모 구성 요소는 props을 제공하여 자식 구성 요소에 일부 정보를 전달할 수 있다.
props은 HTML 속성을 상기시킬 수 있지만 개체, 배열 및 함수를 포함하여
이를 통해 모든 JavaScript 값을 전달할 수 있다.
요약하자면
부모 컴포넌트 ====속성을 통해 데이터 전달=====> 자식 컴포넌트
React 프로젝트에서
style 을 변경하는 방법
1. 가장 기본적으로 html 태그 내에서 style={{}} 작성으로 적용
2. 여러 라이브러리 사용
우선 이번시간에는 css를 위에서 설명한 1번으로 적용하기로 하고,
속성을 부여하고 인자를 전달하여
공통된 속성에서 일부분만 바꾸어 보는 작업을 해보기로 한다.
해볼 것
1. App() 안에 버튼 두개를 생성한다.
2. 두 버튼의 css 속성은 같다. 그러나
3. 하나는 Save Change, 하나는 Continue 라는 이름을 가지도록 변경한다. (폰트 사이즈도 서로 다르게)
만들기 전에 알아야 할 개념
Btn 이라는 함수를 생성해주고 그 안에 인자(text, big)를 전달해주면
그 속성들이 적용이 됨을 볼 수 있다.
인자로 전달된 text와 big은 태그 안에서 써준 속성들의 이름이다.
어떠한 이름을 써주더라도 상관 없음.
단, Btn 함수 안에서 {text} 를 적어주어야만
화면에 나타남을 확인할 수 있다.
<script type="text/babel">
// Btn
function Btn({ text, big }) {
return (
<button
style={{...}}
>
{text}
</button>
);
}
// App
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
실행결과는 다음과 같다.
Save Changes 버튼이 폰트가 더 큰 이유는
버튼 태그에 JSX로 style 속성을 줄 때
fontSize: big ? "3rem" : "1rem"
조건을 주었기 때문이다.
따라서 big 이 참일 경우 즉,
<Btn text="Save Changes" big={true} />
이 버튼에게는 폰트가 3rem 으로 적용되고
<Btn text="Continue" big={false} />
이 버튼에게는 폰트가 1rem 으로 적용된다.
전체코드
<!DOCTYPE html>
<html>
<body id="body">
<div id="root"></div>
</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({ text, big }) {
return (
<button
style={{
backgroundColor: "rgb(0,0,0,25%)",
color: "white",
padding: "0.5rem 0.5rem",
border: "none",
borderRadius: "0.2rem",
cursor: "pointer",
marginRight: "1rem",
fontSize: big ? "3rem" : "1rem"
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
그냥 html, css, js를 쓸때
공통적인 속성이 있는 컴포넌트의 경우
html,css,js 모두 다 가져와서 복붙을 해야하는 불편함이 있었는데
리액트를 쓰게 되면 그 불편했던 점을
거의 대부분 해결할 수 있을 것 같다.
아직 익숙하지 않아서 크게 다가오지는 않지만
어서 큰 깨달음을 얻게 되기를..ㅜ
좀 더 공부 해봐야겠지만
아무튼 여러모로 편리할 것 같은 느낌이라 재밌다!