감정 일기장 프로젝트_공통 컴포넌트 구현

< 프로젝트 기본 과정 >

1. 리액트 폴더 생성

2. 라우팅 설정

3. 자주 사용하는 함수 구현

4. UI 설정

5. 공통 컴포넌트 구현

6. 페이지 별 기능 구현

7. 최적화

8. 배포

 

---

1. Button Component

- text, onClick, type을 props로 받아서 사용

import "./Component.css";

const Button = ({ text, onClick, type }) => {
  return (
    <div>
      <button className={`Button Button_${type}`} onClick={onClick}>
        {text}
      </button>
    </div>
  );
};

export default Button;

 

- type별로 css를 다르게 설정하여 구분 (className을 type별로 구분)

/* Button */
.Button {
  border: none;
  cursor: pointer;
}

.Button_positive {
  background-color: red;
  color: white;
}

.Button_negative {
  background-color: blue;
  color: white;
}

 

사용 예시)

 

---

2. Header Component

- leftChild, title, rightChild를 props로 받아서 사용 

import "./Component.css";

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

export default Header;

 

사용예시) 

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.