📚 Props를 통한 컴포넌트의 유연성 극대화
리액트를 사용하는 웹 개발의 큰 장점 중 하나는 바로 '유연성'이다. 그 중, 컴포넌트의 유연성과 재사용성을 높이는 핵심 요소는 바로 'Props'와 'Children'이다.
이번 글을 통해 이 두 가지를 통해 어떻게 다양하고 유연한 컴포넌트를 만들 수 있는지 알아보자.
Props
JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데, 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부른다.
props를 활용하면 컴포넌트에 전달하는 prop값에 따라 랜더되는 모습을 다양하게 변경 가능하다는 장점을 얻을 수 있다.
📌 Props: 컴포넌트에 데이터 전달하기
Props는 'Properties'의 약자로, 리액트 컴포넌트에 데이터를 전달하는 방법이다. 각 속성은 하나의 객체로 모여 함수의 첫 번째 파라미터로 전달된다.
예를 들어, Message 컴포넌트에 text 속성을 지정해 보면 다음과 같다.
// App.js
import Message from './Message';
function App() {
return (
<div>
<Message text="안녕하세요, 리액트!" />
</div>
);
}
export default App;
Message 함수 내부에서 props를 통해 이 값을 받아올 수 있다.
// Message.js
function Message(props) {
console.log(props) // { text: "안녕하세요, 리액트!" }
return <p>{props.text}</p>;
}
export default Message;
📌 Props로 컴포넌트 다양화하기
Props를 활용하면 동일한 컴포넌트를 다양한 방식으로 표현할 수 있다.
예를 들어, Message 컴포넌트에 여러 메시지를 전달할 수 있다.
// App.js
import Message from './Message';
function App() {
return (
<div>
<Message text="첫 번째 메시지입니다." />
<Message text="두 번째 메시지입니다." />
<Message text="세 번째 메시지입니다." />
</div>
);
}
export default App;
📌 Destructuring을 이용한 Props 활용
Props는 객체 형태를 띠므로, JavaScript의 Destructuring 문법을 활용해 코드를 더욱 간결하게 만들 수 있다,
추가로, 코드를 작성하다가 prop을 실수로 생략할 수도 있으니, 각 prop의 default값을 지정해주는 것도 권장되는 방법 중 하나이다.
// Message.js
function Message({ text = "Hi React!" }) {
return <p>{text}</p>;
}
export default Message;
Children prop
props에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있다.
Children은 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이며, Children prop을 사용하게 되면 커스텀 컴포넌트 태그 사이에 삽입되는 태그들을 해당 커스텀 컴포넌트 태그에서 children이라는 prop으로 받아서 사용할 수 있게 된다.
📌 Children을 통한 컴포넌트 내용의 유연한 전달
JSX에서 컴포넌트를 여는 태그와 닫는 태그 사이에 위치한 모든 것이 children prop으로 전달된다.
JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다.
아래 간단한 예제를 통해 사용 방법을 살펴보자.
// Button.js
function Button({ children }) {
return <button>{children}</button>;
}
export default Button;
// App.js
import Button from './Button';
function App() {
return (
<div>
<Button>확인</Button>
<Button>취소</Button>
</div>
);
}
export default App;
📌 Children을 통한 표현 (vs props)
JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고, 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있다.
이 children을 활용하면 단순히 텍스트만 작성하는 걸 넘어서 컴포넌트 안에 컴포넌트를 작성할 수도 있고, 컴포넌트 안에 복잡한 태그들을 더 작성할 수도 있다. 또한 HTML 태그 등 다양한 내용을 자유롭게 포함할 수도 있다. 이를 통해 컴포넌트의 재사용성과 유연성을 크게 향상시킬 수 있으니 children을 적재적소에 잘 활용해보자.
마지막으로, children은 렌더링 최적화 시 사용 가능한데, 이 부분은 매우 중요한 개념이다보니 추후에 다른 글에서 다시 다뤄보고자 한다.
Outro
Props와 Children은 리액트에서 컴포넌트를 더욱 강력하고 유연하게 만들어주는 핵심 요소이다. 이들을 통해 코드의 재사용성을 높이고, 보다 유지보수가 쉬운 웹 애플리케이션을 구축할 수 있게 도와준다.
특히나, Children prop를 잘 사용하면 조금 더 직관적이고 가독성 높은 코드를 작성할 수 있을 뿐 아니라 랜더링 시 최적화에도 큰 도움이 된다는 점을 유의깊게 숙지해야겠다.
오늘의 학습을 통해 Props와 Children의 강력함에 대해 다시 한 번 깨달을 수 있었고, 특히 Children prop를 활용한 랜더링 최적화 방법에 대해 더욱 깊게 알아보고 싶은 호기심이 생겼다. 이에 대해서는 더욱 깊게 학습하고 충분히 경험한 후, 추후 글을 통해 다시 한 번 포스팅하고자 한다.
