니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!
출처 : https://nomadcoders.co/react-for-beginners
이전글에 이어, 이번에는 Props에 대해 알아보겠습니다.
Props란 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법입니다.
1. Props를 사용하지 않는 버전
- 우선 Props의 장점을 극대화하여 느끼기 위해, Props를 사용하지 않는 버전으로 각각의 버튼마다 컴포넌트를 만들고 스타일을 일일이 지정을 해줘야 합니다.
function SaveBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px"
}}
>
Save Changes
</button>
);
}
// 함수형 컴포넌트
function ConfirmBtn() {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px"
}}
>
Confirm
</button>
);
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
2. props 사용
- 컴포넌트명을 Btn으로 만들고, function을 사용하여 함수형 컴포넌트를 만들었습니다.
그리고 나서, 두개의 Btn 컴포넌트를 렌더링하여 각각 props를 지정해주었습니다.
주석처럼 함수에 매개변수를 넣는 것과 동일하게 사용되며, 심지어 같은 컴포넌트지만 변수를 다르게 사용해도 되고, 값의 형태 또한 달라도 가능했습니다. (진짜 매우 신기함)
function Btn(props) {
console.log(props);
}
function App() {
return (
<div>
<Btn banana="Save Changes" x={false} />
<Btn banana="Continue" y={7} />
{/* Btn({banna:"Save Changes"}) 과 같음 */}
</div>
);
}
Btn의 props는 컴포넌트에 넣은 모든 것을 갖는 오브젝트가 됩니다.
3. props 활용
그러면, 원하는대로 이렇게 버튼의 텍스트를 변경할 수 있습니다.
function Btn(props) {
return (
<button
{props.banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue" />
</div>
);
}
4. 더 간단하게 props 접근
그리고 더 간단한 방법으로 props를 굳이 안 써도 바로 접근 가능합니다.
function Btn(banana) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px"
}}
>
{banana}
</button>
);
}
5. 여러 개의 props 사용
아래 코드처럼 두 개 이상의 props도 사용이 가능합니다.
맨 처음에 작성한 코드에 비해 매우 간단해진 것을 알 수 있었습니다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.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: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: "10px",
fontSize: big ? "32px" : "16px"
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" big={false} />
{/* Btn({banna:"Save Changes"}) 과 같음 */}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
다음 글에서는 리렌더링에 대해 조금 더 알아보고 그것을 방지하는 방법도 같이 공부해보겠습니다.
[React] React.memo() : 리렌더링 방지 방법
읽어주셔서 감사합니다.
'Frontend > React' 카테고리의 다른 글
| [React] props types 자료형, 필수 값, 기본 값 지정 (0) | 2026.02.08 |
|---|---|
| [React] React.memo() : 리렌더링 방지 방법 (0) | 2026.02.08 |
| [React] 단위변환기 완성 (minute&hours, km&miles) (0) | 2026.02.07 |
| [React] Divide : 작은 컴포넌트로 분할 - 단위변환기 3 (0) | 2026.02.07 |
| [React] 분 <-> 시, 리셋기능 - 단위변환기2 (0) | 2026.02.03 |