[React] 39. 공통 컴포넌트 구현

Mar 11, 2026

Contents

1. 버튼 컴포넌트 1. 레이아웃 / 스타일 2. props 만들기 3. props 값에 따라 다른 스타일 버튼 렌더링하기 2. 헤더 컴포넌트 1. 레이아웃 2. props 만들기 3. 스타일

1. 버튼 컴포넌트

1. 레이아웃 / 스타일


import "./Button.css";

const Button = () => {
  return (
    <button className="Button">버튼</button>
  );
};

export default Button;


.Button {
  background-color: rgb(236, 236, 236);
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  white-space: nowrap;
}

2. props 만들기

버튼 컴포넌트가 props로 받을 값을 설정하자.


import "./Button.css";

const Button = ({ text, type, onClick }) => {
  return (
    <button onClick={onClick} className="Button">
      {text}
    </button>
  );
};

export default Button;


<Button
        text={123}
        type={"DEFAULT"}
        onClick={() => {
          console.log("123번 버튼 클릭");
        }}
      />
      <Button
        text={123}
        type={"POSITIVE"}
        onClick={() => {
          console.log("123번 버튼 클릭");
        }}
      />
      <Button
        text={123}
        type={"NEGATIVE"}
        onClick={() => {
          console.log("123번 버튼 클릭");
        }}
      />

3. props 값에 따라 다른 스타일 버튼 렌더링하기

className이 props의 type값에 따라 다르게 들어가도록

className을 동적으로 만들어주자.

템플릿 리터럴 문법을 사용하여 동적인 className을 만들 수 있다.

``(백틱)을 사용하여 변수가 들어갈 자리에 $(달러사인)을 넣고

그 뒤에 {}중괄호를 사용하여 그 안에 변수의 값을 넣으며 된다.

우리는 props로 만들어둔 type을 넣어줄건데,

상위 컴포넌트에서 각각 다르게 넣어준 type을 바탕으로

각기 다른 className에 스타일을 넣어주자.


<button onClick={onClick} className={`Button Button_${type}`}>
  {text}
</button>;

템플릿 리터럴 문법으로 각각 다른 상태의 버튼을 나타내는

클래스 네임을 추가로 가지게 된 모습을 확인할 수 있다.

다음으로 부여된 클래스 네임에 각기 다른 스타일을 넣어주자.


.Button_POSITIVE {
  background-color: rgb(100, 201, 100);
  color: white;
}

.Button_NEGATIVE {
  background-color: rgb(253, 86, 95);
  color: white;
}

버튼 완생!

2. 헤더 컴포넌트

다음으로는 헤더 컴포넌트를 만들어보자.

1. 레이아웃


import "./Header.css";

const Header = () => {
  return (
    <header className="Header">
      <div className="header_left"></div>
      <div className="header_center"></div>
      <div className="header_right"></div>
    </header>
  );
};

export default Header;

2. props 만들기


import "./Header.css";

const Header = ({ title, leftChild, rightChild }) => {
  return (
    <header className="Header">
      <div className="header_left">{leftChild}</div>
      <div className="header_center">{title}</div>
      <div className="header_right">{rightChild}</div>
    </header>
  );
};

export default Header;

만들어둔 Header 레이아웃을 App컴포넌트에 렌더링하자.

각 props에 값을 넣는데, 이 때 만들어둔 Button 컴포넌트를

양쪽의 버튼 영역에 props로 전달해주자.


<Header
  title={"Header"}
  leftChild={<Button text={"Left"} />}
  rightChild={<Button text={"Right"} />}
/>;

결과를 확인해보자.

3. 스타일


.Header {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgb(226, 226, 226);
}

.Header > div {
  display: flex;
}

.Header .header_center {
  width: 50%;
  font-size: 25px;
  justify-content: center;
}

.Header .header_left {
  width: 25%;
  justify-content: flex-start;
}

.Header .header_right {
  width: 25%;
  justify-content: flex-end;
}

스타일까지 적용한 모습이다.

양 쪽의 여백이 아쉬워 index.css에서 root의

양쪽에 패딩 속성을 추가해주었다.


#root {
  background-color: white;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  height: 100%;
  box-shadow: rgba(100, 100, 100, 0.2) 0 0 29px 0;
  padding: 0 20px;
}

레이아웃 가다가 잡혔다!