이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다.
지금까지 만든 코드를 살펴보면,
로직들을 고립시켜 분리된 컴포넌트로 재사용 가능하다.
Props
- Props는 프로퍼티 (properties)의 약자이다.
- Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방식이다.
간단한 예제
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css" /> -->
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function SaveBtn() {
return (
<button
style={{ backgroundColor: "tomato", color: "white", padding: "10px 20px", border: 0, borderRadius: 10 }}
>
Save Changes
</button>
);
}
function ConfirmBtn() {
return <button>Confirm</button>;
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
ReactDOM.render(<App />, root); // App을 root 안에 랜더링
</script>
</html>
결과 화면
지금 하고 있는 것은 단지 함수들을 호출하는 것이다.
이것을 함수형 컴포넌트라고 부른다.
함수형 컴포넌트는 function 으로 정의하고 return 문에 jsx 코드를 반환하는 특징을 가진다.
위 코드에서 아쉬운 점이 존재한다.
여러 버튼이 존재할때 각 버튼에 동일한 style을 적용하려면 동일한 코드를 버튼마다 추가 작성해줘야 한다는 것이다.
그러면 코드는 매우 지저분해질 우려가 존재한다.
그러므로 이러한 방식은 좋은 방식이 아니다.
이러한 문제를 해결하기 위해 Props 방식을 사용한다.
Props 방식을 사용한 예제 코드
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css" /> -->
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Btn(props) {
console.log(props);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{props.text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" x={5} />
<Btn text="Continue" x={false} />
</div>
);
}
ReactDOM.render(<App />, root); // App을 root 안에 랜더링
</script>
</html>
결과 화면
이 부분에서 React.js가 실제로 수행하는 작업은 Btn() 함수를 호출해 우리가 작성한 모든 property 정보들을 첫 번째 인자로 넣어주는 것이다.
하지만, 실제로 이러한 방식으로 사용하지는 않을 것이다.
대신 다음과 같은 방식을 사용한다.
개선된 코드 (shortcut)
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css" /> -->
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Btn({ text, x }) {
console.log(text);
console.log(x);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" x={5} />
<Btn text="Continue" x={false} />
</div>
);
}
ReactDOM.render(<App />, root); // App을 root 안에 랜더링
</script>
</html>
결과 화면
이러한 방식을 shortcut이라 하는데, property를 object로부터 꺼낸 것이다.
https://ko.reactjs.org/docs/components-and-props.html#gatsby-focus-wrapper
Components와 Props – React
A JavaScript library for building user interfaces
ko.reactjs.org
'React > Props' 카테고리의 다른 글
| Prop Types (0) | 2022.07.31 |
|---|---|
| Memo (0) | 2022.07.28 |
