React #4

백신따위 나를 이길 수 읎다 ...

---

✅ PropTypes()

• 리액트는 파라미터를 잘 못 넘겨도 확인할 수 없는 문제점이 존재한다.
• 만약, string 타입으로 전달되어야하는 prop에 다른 팀원이 number를 넘겨줘버린다면..?
  이런 문제를 줄이기 위해서 PropTypes라는 모듈의 도움을 받을 수 있다!
• PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사하고,
  자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 경고문을 띄워준다.
• 사용 예시

import PropTypes from 'prop-types';

function Btn({ text }) {
	return (
    	<button
        	style={{fontSize}}> {text} </button>
	);
}

Btn.propTypes = {  <<<---
	// prop 이름 : type 명
    text : PropTypes.string,
    fontSize : PropTypes.number.isRequired,
}

function App() {
	return (
    	<div>
        	<Btn text="save changes" fontSize={18} />
            <Btn text="continue" />
        </div>
	)
};

• Btn.propTypes 안에서 'text'는 string 타입, 'fontSize'는 number 타입으로 작성했다.
  이후, 만약 'text' prop의 타입을 string이 아닌 number나 다른 타입으로 작성했을 경우 경고 문구가 뜰 것!
• isRequired - 필수로 포함되어있어야할 prop
  만약 isRequired 설정된 prop 이 컴포넌트 내에 없을 경우 경고창을 띄운다.
• string, number 외에도 array, boolean, function, object.. 등등 다양한 것을 검사할 수 있다.

✅ create-react-app

• node.js 다운로드 (콘솔에서 node -v 입력시 node.js 버전이 나온다면 정상설치)
• npx i 커맨드 사용 가능 여부 확인
• 설치 : 콘솔에 npx create-react-app my-app(프로젝트 이름, 폴더이름)
• 실행 : npm start
  
• 반갑다.
• ★ 참고) ReactDOM.render 구문 폐기 > ReactDOM.createRoot 구문으로 대체

✅ react - CSS Module

CSS Moudle은 CSS 클래스를 불러와서 사용할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 고유하게 자동으로(랜덤으로) 만들어주어 컴포넌트 중첩현성을 방지해주는 기술

• CSS Module 을 사용하지 않으면, 같은 태그라도 내가 적용하고 싶은 부분 부분에만 적용할 수 없다. 따라 스타일 시트에서 작성한 모~든 태그에 스타일이 적용된다.

- 기존 방법

• 만약, button 태그에 스타일을 주고 싶다면..
• .css 파일을 만들어주고, 적용하고싶은 스타일을 작성해준다.
• 'index.js'에 import 해주기 (ex-import "./styles.css";)
• 그럼 모든 button 들은 'styles.css'에서 작성한 백그라운드 컬러, 폰트사이즈를 동일하게 가지게 될 것... 🥲

- CSS Module 사용

• css 파일 생성 시 '.css'가 아닌 '.module.css'로 생성 ('button.module.css')
• 스타일을 적용할 태그를 직접 작성하는 것이 아닌, 클래스를 생성해준다.

// -button.module.css

.btn {
	color: white;
    background-color: tomato;
}

• 버튼태그가 있는 파일에 import

// button.js

import styles from "./button.module.css";
// import <스타일 이름> from <css 파일 경로>

• 중요 ★ create-react-app은 module.css를 javascript 오브젝트로 변환시킨다.
• 또, 내가 만든 스타일 파일에 별도의 이름(별명)을 설정할 수 있다 ('styles' 라고 설정한 것)
• JS 오브젝트에서 요소를 꺼내 쓸 때 처럼, 똑같이 작성
• 스타일 이름 중첩 사용 가능

function Button ({ text }) {
	return <button className={styles.btn}>{text}</button>;
}

• 위에서 말했던 것 처럼, create-react-app은 자동으로 무작위적 랜덤 class 를 부여함.
• 따라 나는 .btn 이라는 클래스를 부여하였지만 [파일이름]_[클래스이름]__[해쉬값] 형태로 설정됨

ex) 크롬 > f12 > Elements
    <button calss="button_btn_1uu0C"> Continue </button> == $0

• SUPER COOOOOOOOOOOOOOOL 😎

---