TIL - 리액트에서 children 활용

Taesol Kwon·2020년 3월 1일
0

Wecode

목록 보기
13/32

리액트에서 웹페이지를 만들다 보면 공통부분인데 일부만 약간 다른 경우가 있다. 일반적인 방법으로는 버전을 다르게 만드는 것인데 이보다 효율적인게 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>
    );
  }
}

위의 경우가 검색창이 없는 부분이다. 그리고 검색창은

profile
사진촬영을 좋아하는 프론트엔드 개발자입니다.

0개의 댓글