리액트에서 웹페이지를 만들다 보면 공통부분인데 일부만 약간 다른 경우가 있다. 일반적인 방법으로는 버전을 다르게 만드는 것인데 이보다 효율적인게 children을 이용하는 것이다. 말로만 해서는 사실 이해가 잘 안되므로 예제를 보여주겠다.
현재 우리팀이 프로젝트로 하고 있는 마이리얼트립 페이지이다. 위를 보면 모두 같은데 딱하나 검색창 부분만 다르다. 위와 같은 경우 children을 이용하면 좋을 것 같아 가져와봤다.
export default class Header extends Component {
render(){
return (
<header>
<div className="headerTop container">
<div className="logo">
<h1>
MyFakeTrip
</h1>
</div>
<div className="myPage">
<div className="partners">
파트너 등록하기
</div>
<div className="logIn">
로그인
</div>
<div className="signUp">
회원가입
</div>
</div>
</div>
<nav className="menu container">
<Nav/>
</nav>
</header>
);
}
}위의 경우가 검색창이 없는 부분이다. 그리고 검색창은
사이에 넣어주면 된다.
export default class Header extends Component {
render(){
return (
<header>
<div className="headerTop container">
<div className="logo">
<h1>
MyFakeTrip
</h1>
</div>
<AddSomething>여행지나 상품을 검색해보세요!</AddSomething>
<div className="myPage">
<div className="partners">
파트너 등록하기
</div>
<div className="logIn">
로그인
</div>
<div className="signUp">
회원가입
</div>
</div>
</div>
<nav className="menu container">
<Nav/>
</nav>
</header>
);
}
}export default class AddSomething extends Component {
render(){
return(
<div>
<input>
{this.props.children}
</input>
</div>
)
}
}이렇게 자식 컴포넌트에 children을 props해주면 저 자리에 "여행지나 상품을 검색해보세요"가 들어가게 된다. 텍스트뿐만 아니라 태그형식도 모두 들어가니 활용하기가 매우 좋다.
사진촬영을 좋아하는 프론트엔드 개발자입니다.