React_기초다지기_하루정리(font인용, 공용컴퍼넌트 생성,)

◼︎React

---

⚑목표 : 실습 기초 세팅

1. 폰트 세팅
   : Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅
2. 레이아웃 세팅
   : 모든 페이지에 반영되는 레이아웃 세팅
3. 이미지 에셋 세팅
   : 감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅
4. 공통 컴퍼넌트 세팅
   : 모든 페이지에 공통으로 사용되는 버튼, 헤더컴포넌트 세팅

---

↓실습 세팅 중 내가 기억하고 싶은 개념정리

[폰트 세팅]

• 원하는 폰트를 코른 후, css로가서 import

@import url(...);

.App{
font-family: ---; //사용하고 싶은폰적용
}

[다른 폴더에 있는 이미지를 원하는 폴더로 가져오기]

 <img src={process.env.PUBLIC_URL + "/assets/emotion1.png"} />

• 이미지의 경로가 다른 폴더에 파일로 존재하고 있다면, process.env. --- 을이용하여 그 폴더에
  직접 접근하고 + 이미지 경로의 세부 경로는 적어주면 됨.

[비슷한 기능을 하는 버튼이 있다면? (공통 컴퍼넌트 사용)]

• 버튼과 같은 속성은 수정, 추가, 삭제 등, 비슷한 성격을 가진 경우가많아 공통으로 사용할 수있게
  만들어주는 것이 좋다!

[MyButton.js]

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

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

• 이 처럼 버튼의 인자를 text, type, onClick으로받고, type의 속성마다 구분될 수 있게 바꿔주면 된다
• button의 className을 보게 되면 낯선 부분이 보이는데, className을 두가지를 받아 속성 바다 다른
  버튼을 보여주는 효과를 창출 할 수 있으며, default시의 버튼 또한 선언을 통해 충족할 수 있다.

여기서 문제가 되는 부분이 발생하는데, 만약 내가 정하지 않은 의도치 않은 type이 들어오게 되면 어떻게해야할까?

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

• type이 제대로 들어왔는지 검사해주는 변수를 하나 만들고, 이때 맞지 않는 type이 들어오게 된다면, 전부 강제로
  default시켜주면된다.
  그리고나서 btntype의 위 코드에서 className의 인자로 넘겨주게 되면 우리가 우려했던 문제가 해결된다!

[App.js]

<MyButton
          text={"버튼"}
          onClick={() => alert("버튼클릭")}
          type={"positive"}
        />

        <MyButton
          text={"버튼"}
          onClick={() => alert("버튼클릭")}
          type={"negative"}
        />

        <MyButton text={"버튼"} onClick={() => alert("버튼클릭")} />

• 각기 다른 type을 설정해주고, css부분적인 부분도 만들어주게 된다면, 동일한 컴퍼넌트의 다른 버튼의 모습을
  효과적으로 반환할 수있다.

  ---

[공통 헤더 세팅]

[App.js]

    <MyHeader
            headText={"App"}
            leftchild={
              <MyButton text={"왼쪽 버튼"} onClick={() => alert("왼쪽 클릭")} />
            }
            rightchild={
              <MyButton
                text={"오른쪽 버튼"}
                onClick={() => alert("오른쪽 클릭!")}
              />
            }
          />

• MyButton컴퍼넌트 인용체크

[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;