[Udemy] React 실전(감정일기장) - 프로젝트 기초공사1

productuidev·2022년 5월 18일
0

React Study

목록 보기
38/52
post-thumbnail

React 실전 (Project)

Udemy - 한입크기로 잘라 먹는 리액트


📌 감정일기장 만들기 프로젝트 기초공사1

☑️ 1. Font 설정

  • 프로젝트에서 전역에 사용할 웹 폰트(Open Font License) : Google Font
    @import
  • src/App.css

☑️ 2. Layout 설정

☑️ 3. Image Assets 설정

  • public/assets/에 이미지 저장
const env = process.env;
env.PUBLIC_URL = env.PUBLIC_URL || "";

☑️ 4. 공통 Components 설정

  • src/components/MyHeader.js : 공통 헤더 컴포넌트
const MyHeader = ( {headText, leftChild, rightChild}) => {
  return (
    <header>
      <div className="head_btn_left">{leftChild}</div>
      <div className="head_text">{headText}</div>
      <div className="head_btn_right">{rightChild}</div>
    </header>
  );
}

export default MyHeader;
  • src/components/MyButton.js : 공통 버튼 컴포넌트
const MyButton = ({text, type, onClick}) => {

  const btnType = ["positive", "negative"].includes(type)? type:"default";

  return (
    <button
      className={["MyButton", ` MyButton_${btnType}`].join("")}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

MyButton.defaultProps = { type: "default", };

export default MyButton;

공통 컴포넌트 point

  • props으로 내려주기 (type, text, onClick / headText, leftChild, rightChild)
  • btnType 설정 (positive, negative, default)
  • defaultProps 설정

💬 이번 부분은 아무래도 디자인/퍼블리싱과 관련이 많은 부분이었지만 구현에 집중해서 들으려 애썼다(난 이제 디자이너가 아니니까) But 직업병 탓이었을까, 폰트 선택한 것에서부터... 왠지 모를 안드로이드 감성이 느껴졌다...😅 하하하ㅏㅏ

profile
필요한 내용을 공부하고 저장합니다.

0개의 댓글